Question

我一直试图做一个荒谬的基本任务但却无法完成任务。我无法想象如何使第二张图像在第一张图像的正下方。这令人沮丧!!

在这里摆弄：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>

任何修改它的调整都会很棒。

Answer 1

这些答案应该有效，但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>

Answer 2

线框包裹浮动元素。您应该在容器末尾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;
}

Answer 3

您所要做的就是将clearfix类添加到comment div。

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

}

DEMO

Answer 4

添加＆＃34; clear:left＆＃34;风格到第二个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 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>

无法将图片和文本对齐在一起

4 个答案: