如何在CSS中定位這些圖像？

Question

我在CSS中的某些評論旁邊定位2張圖片時遇到了一些麻煩。

這是我的評語是應該看起來像：

這是它看起來像現在：

我怎樣才能第一線定位這個文字旁邊的圖像？我試圖把文本放在一個段落中，最後將第一行放在作者圖片的下面。現在我試圖把文本放在一個div中，但最終會像第二張圖片一樣。

這是我用我的評論代碼：

<div id="recensies_order"> 
    <div class="reviews item1"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div> 
    <div class="reviews item2"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></</div> 
    <div class="reviews item3"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div> 
</div> 

#recensies_order { 
color: #ACACAB; 
font-size: 16px; 
font-style: italic; 
} 

Answer 1

你正在尋找的期限爲floating。

在您的情況下應該工作（未經測試）：

<div id="recensies_order"> 
    <div class="reviews item1"> 
     <img style="margin-right: 10px;" src="quotes.png" alt="quote" style="float: left" /> 
     <img src="author.png" alt="authorpic" style="float: left" /> 
     <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div> 
</div> 

當然那些style增加，應以後搬入您的CSS文件。

JsFiddle Demo

Answer 2

添加float: left;到所有的圖像

Answer 3

#recensies_order { 
color: #ACACAB; 
font-size: 16px; 
font-style: italic; 
width:400px; 
} 
#recensies_order img{ 
    float:left; 
    clear:right; 
    margin:10px; 
} 
#recensies_order img+img{ 
    width:64px; 
} 

.reviews{ 
    width:100%; 
    display:block; 
    padding-bottom:10px; 
} 

JSFIDDLE DEMO

變化與和你有這樣的：

#recensies_order { 
color: #ACACAB; 
font-size: 16px; 
font-style: italic; 
width:300px; 
} 
#recensies_order img{ 
    float:left; 
    clear:right; 
    margin:10px; 
} 
#recensies_order img+img{ 
    width:64px; 
} 

.reviews{ 
    width:100%; 
    display:block; 
    padding-bottom:10px; 
} 

JSFIDDLE DEMO 2

Answer 4

必須有影響spans其他代碼。你的代碼很好。默認情況下圖像和跨度是內聯的，所以它應該做你以後的事情。你可以用浮筒做，但它們是而不是需要。

下面是一個包含您的代碼的筆，浮動圖像和圖像設置爲inline-block。 http://codepen.io/anon/pen/pmJhL