無法對齊圖片和文字

Question

我一直在嘗試做一個荒謬的基本任務，但無法完成。

我想有一個簡單的點評

*image* *name* 
     *comment* 

我不能設法文字到圖像的右側放置的以下結構。
這是我目前的小提琴：http://jsfiddle.net/dvir0776/xaLosyjs/

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px;"> 
    <div style="text-align:left; font-size:8pt;"> 
     <h5 style="margin-bottom:0;">Chris Fanelli</h5> 
     I would love to win the iphone 6 in black or gold or the mac or the cannon they all are great I love apple products! 
    </div> 
</div> 

任何的調整來修復它會很大。

Answer 1

只需將float:left添加到您的圖像，它的工作。猜猜這是你在找什麼。

<div class="comment"> 
    <img src="d.jpg" style="float:left;width:13%; margin-right: 12px;"> 
      <div style="text-align:left; font-size:8pt;"> 
      <h5 style="margin-bottom:0;">Chris Fanelli</h5> 
      comment comment comment comment comment comment comment comment comment comment!</div> 
      </div> 

Answer 2

首先，讓我們擺脫你的內聯風格和使用更好的標記，那麼改變你的HTML這樣的：現在不必編寫一次，再而三的內嵌樣式

<div class="comment"> 
    <img src="d.jpg" /> 
    <div class="textbox"> 
     <h5>Chris Fanelli</h5> 

     <p>comment comment comment comment comment comment comment comment comment comment!</p> 
    </div> 
</div> 

和，你可以得到好處可重用類的，所以改變你的CSS是這樣的：

.comment img { 
    width:13%; 
    margin-right: 12px; 
    display:inline-block; 
    vertical-align:middle; 
} 
h5 { 
    font-size:18px; 
} 
.textbox { 
    text-align:left; 
    font-size:12px; 
    display:inline-block; 
    vertical-align:top; 
} 

Fiddle here