html - 无法将图片和文字彼此对齐

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>