html - CSS Boxes : float: left, 但跳到下一行时从左边开始

Question

我有几个包含文本的框，它们应该并排显示。它们都有固定的宽度，但高度可变(取决于它们的内容)。它们位于宽度可变的容器内。

如果框太多，我希望它们跳到下一行并再次从左边开始。我使用左浮动框实现了这一点。如果每行的第一个框高于下一个框，这会导致问题，因为新行中的框不会从左侧开始。这是一个演示:

HTML:

<section>
    <article>One: This ​​​​text is so long, it's so long oh my gosh!</article>
    <article>Two</article>
    <article>Three: bla bla bla bla bla bla bla bla</article>
    <article>Four</article>
</section>​

CSS:

section{
    width: 300px; /* For demo, this can vary */
    overflow: hidden;
}
article{
    float: left;
    width: 100px;
    background: #dddddd;
    padding: 10px;
    margin: 10px;
}
​

你也可以看看这个 JSFiddle，你可以立即看到问题:http://jsfiddle.net/dwr6K/方框“三”从方框“一”开始，尽管我希望它从方框“一”下的新行开始。遗憾的是，我不能使用 clear: left，因为我不知道一行可以容纳多少个框。

有没有办法阻止这种情况并以我想要的方式显示它？

Answer 1

此处:http://jsfiddle.net/dwr6K/9/

只需删除 float: left;

并添加

display: inline-block;
vertical-align: top;

到文章。

正如@JimmyX 所指出的，请仔细阅读这篇关于 Cross-Browser Inline-Block 的帖子

基本上，float:left 的作用是让每个元素紧挨着它能找到的最左边的 div。因此，如果高度不同，您将无法获得所需的布局。