2

我有几个包含应该彼此相邻显示的文本的框。它们都有固定的宽度，但高度可变（取决于它们的内容）。它们位于宽度可变的容器内。

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

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，因为我不知道一行可以容纳多少个盒子。

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

4

4 回答 4

3

如果您不太担心对旧浏览器的支持，您可以使用display: inline-block而不是。float: left

这是' s 怪癖的更详细的纲要。display: inline-block

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

article {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    background: #dddddd;
    padding: 10px;
    margin: 10px;
}
于 2012-07-12T21:14:49.053 回答
3

这里：http: //jsfiddle.net/dwr6K/9/

只需删除float: left;

并添加

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

到article.

正如@JimmyX 指出的那样，请阅读这篇关于跨浏览器内联块的帖子

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

于 2012-07-12T21:11:50.330 回答
0

假设您只想将 2 个 div 配对在一起，您可以在每个奇数 div 上使用 clear left。见：http: //jsfiddle.net/dwr6K/

也就是说，添加行article:nth-child(odd) { clear: left; }

于 2012-07-12T21:12:52.257 回答
0

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

于 2012-07-12T21:05:08.563 回答