如何把圖像和內容並排

-1

<article> 
    <h2 id="aboutme">About me </h2> 
    <p>I currently studying design and coding in Nanyang Polytechnic . I also have 
    passion or gaming</p> 
    <img src="index.images/rainbow%20six%20siege.jpg" class="image2"/> 
</article> 
<aside> 
    <h2>.skills</h2> 
    <div id="image2"> 
    <img src="index.images/skill.jpg"/> 
    </div> 
</aside>

我還是新來的編碼，請原諒我。我需要幫助他們造型，看起來像圖像中的那些：https://i.stack.imgur.com/xsQj4.jpg 如何把圖像和內容並排

來源

2017-01-27 Owen Lim

https://jsfiddle.net/Lpjxse6L/這撥弄可以幫助 – Shubhranshu

您可以複製並粘貼此代碼。它會工作。 Here's the Example

<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
</head> 
<h1 class="text-center">Hi I'm Owen</h1> 
<div class="row"> 
    <div class="col-xs-6"> 
    <h2>About me</h2> 
    </div> 
    <div class="col-xs-6"> 
    <h2>.skills</h2> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-3"> 
    <img src="index.images/rainbow%20six%20siege.jpg" class=""/> 
    </div> 
    <div class="col-xs-3"> 
    <p>I currently studying design and coding in Nanyang Polytechnic . I also have 
passion or gaming</p> 
    </div> 
    <div class="col-xs-6"> 
    <img src="index.images/skill.jpg"/> 
    </div> 
</div>

開始使用自舉在這裏 - http://getbootstrap.com/getting-started/

希望幫助！乾杯。

來源

2017-01-27 04:48:54

感謝您的幫助非常感激 –

我很高興有幫助。如果我回答了您的問題，請將其標記爲已回答。 –

但是，如果有css在哪裏，我嘗試把它放在我的代碼中，它不會像你的代碼那樣顯示 –

-1

非常簡單JSfiddle這裏只是你需要的東西。

https://jsfiddle.net/8k5fLxsn/

HTML：

<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png"> 
<p> 
    Text next to image. Put anything you want here. 
</p>

CSS：

img { 
    float: left; 
    margin-right: 20px; 
}

來源

2017-01-27 05:10:23

也許你可以解釋''浮動'做什麼，因爲這個答案不會真的幫助任何人有更復雜的問題。 –

如何把圖像和內容並排

回答

相關問題