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/ Box“Three”从Box“One”开始，虽然我希望它从新行开始在框“一”下。可悲的是，我无法使用clear: left，因为我不知道一行中有多少个盒子。

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

Answer 1

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

只需删除float: left;

即可

并添加

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

到article。

正如@JimmyX指出的那样，请查看关于Cross-Browser Inline-Block

的帖子

基本上，float:left所做的是它使每个元素贴在它可以找到的最左边的div旁边。因此，如果高度变化，则无法获得所需的布局。

Answer 2

如果您不太担心支持旧浏览器，则可以使用display: inline-block代替float: left。

这是display: inline-block article { display: inline-block; vertical-align: top; width: 100px; background: #dddddd; padding: 10px; margin: 10px; }的怪癖。

要使您的示例正常工作，只需使用：

{{1}}

Answer 3

如果所有高度都有所不同，请查看jQuery插件Masonry - http://masonry.desandro.com/

Answer 4

你可以在每个奇数div上使用一个清晰的左边，假设你只想要将2个div配对在一起。请参阅：http://jsfiddle.net/dwr6K/

即添加第article:nth-child(odd) { clear: left; }行

CSS Boxes：float：left，但是当跳到下一行时从左边开始

4 个答案: