無法對齊圖片和文字

我一直在嘗試做一個荒謬的基本任務，但無法完成。我無法確定如何使第二張圖像位於第一張圖像的正下方。這令人沮喪！無法對齊圖片和文字

小提琴這裏：http://jsfiddle.net/dvir0776/v9v512tm/

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
    <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> 

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
    <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>

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

來源

2014-09-21 david

清除浮動是要走的路，但如何對我們清理您的標記，並分開CSS [就像這個例子]（http://jsfiddle.net/2k9k5jgg/2/）？ – misterManSam 2014-09-21 07:20:34

線框包裹浮動元素。您應該在容器末尾clear the float處，.comment。

或者由traditional way：

<div class="comment"> 
    <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;" /> 
    <!-- ... --> 
    <div class="clearfix"></div> 
</div>

.clearfix { clear: both; }

或者通過something newer：

.comment:after { 
    content: ""; 
    display: block; 
    clear:both; 
}

來源

2014-09-21 07:05:49

評論將堆疊在一起，爲什麼不只是'.comment {clear：left; }' – misterManSam 2014-09-21 07:34:04

@misterManSam那麼文檔流的其餘部分會發生什麼？ http://jsfiddle.net/hashem/v9v512tm/4/ – 2014-09-21 07:37:18

嗯，這不是[真的是一個問題再次清除浮動]（http://jsfiddle.net/v9v512tm/6/）和評論往往是文檔的底部，可能只是一個頁腳來清除。我會說這是一個可行的選擇。 – misterManSam 2014-09-21 07:43:00

所有您需要做的就是添加clearfix類的comment股利。

.clearfix:after { 
visibility: hidden; 
display: block; 
font-size: 0; 
content: " "; 
clear: both; 
height: 0;

}

DEMO

來源

2014-09-21 07:06:16 karan3112

添加「clear:left」風格到2格

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
     <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> 

<div class="comment" style="clear:left"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
     <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>

來源

2014-09-21 07:06:23

這些問題的答案應該工作，但here是一個另類。它使用display: table-row;。我只是爲了美觀而添加padding-top: 10px;。容器可能不是必需的。

CSS

.container { 
    width: Auto; 
} 
.comment { 
    display: table-row; 
    padding-top: 10px; 
} 
.comment img { 
    display: table-row; 
    padding-top: 10px; 
}

HTML

<div class="container"> 
    <div class="comment"> 
     <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
     <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> 
    <div class="comment"> 
     <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;"> 
     <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> 
</div>

來源

2014-09-21 07:10:58 Leto

無法對齊圖片和文字

回答

相關問題