css - 两列动态布局

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>

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

---

---

这应该是这样的：

我不想使用tablesor javascript。我不能对 box-text 使用 margin-left，因为图像的宽度是动态的。

感谢您的贡献！

Answer 1

尝试使用 display: table 作为你的 box 类， display: table-row 用于 image 和 box-text 类。然后使用 vertical-align: top on image 和 text 对齐内容。

Answer 2

试试这个CSS：

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

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

<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>s 像表格的单元格一样，然后使内联内容垂直对齐顶部：

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

在这里检查