两列动态布局

Question

我有几个包含以下内容的框！

<div class="box">
  <div class="image">
    <img src="anything.png" /> <!-- The width is dynamic -->
  </div>
  <div class="box-text">
    <h2>Some Title</h2>
    <p>Lorem ipsum ...</p>
  </div>
</div>

问题是文本在图像后浮动到左侧。我希望它直接向下，因为我在下图中标记了它：

---

---

这就是它的样子：

我不想使用tables或javascript。我不能使用margin-left作为文本框，因为图像的宽度是动态。

感谢您的贡献！

Answer 1

尝试使用display：table作为您的box类，并显示：table-row表示图像和box-text类。然后使用vertical-align：top在图像和文本上对齐内容。

Answer 2

试试这个css：

.image { float: left; }
.box-text { float: left; }

此外，您可能希望在box div之后停止浮动元素，所以最后不要忘记一些清理：

<div style="clear:both"></div>

Answer 3

这是一个展示如何实现此布局的谜语：http://jsfiddle.net/X7j4P/

.box {
    overflow:hidden;
}
.image {
    float:left;
}
.image img {
    width:300px;
}
.box-text {
    width:300px;
    float:left;
}
p {
    margin-bottom:10px;
}

Answer 4

不要使用表格，但要使<div>的行为与表格的单元格相同，然后使内联内容垂直对齐到顶部：

​.box{display:table}
.image{display:table-cell;vertical-align:top;}
.box-text{display:table-cell;vertical-align:top;}

Check it here