Question

我有一组具有可变高度的div，这些div已经向左浮动。当一行中有太多所述div时，下一个div将换行到一个新行（应该如此）。我遇到的问题是新行是在新行的偏移x位置开始的，这样div就在前一行的最后一个div之下，后面没有更高的div - 通常留下很大的余量在左侧。

div.entry 
{
    float: left;
    width: 180px;
    padding: 10px;
}

我基本上想要它，以便每个“行”中的最后一个div.entry（包装到新行之前的那个）清除浮动，以便下一行浮动div都对齐到相同的高度，并且左侧没有相当大的间隙。以ASCII格式说明：

我期待发生的事情：

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+
+-----+ +-----+ +-----+ +-----+
|  E  | |  F  | |  G  | |  H  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+

实际发生的事情：

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+ +-----+ +-----+
                |  E  | |  F  |
                |     | |     |
                +-----+ |     |
                        +-----+
+-----+ +-----+
|  G  | |  H  |
|     | +-----+
+-----+

迈克尔

Answer 1

如果float: left不是强制性的，那么总是display: inline-block更适合这项工作。由于“内联流”已经按照您的意愿运行。

.item {
    display: inline-block;
    vertical-align: top;
    width: 300px;
}

这在当前的浏览器中表现得非常好。请参阅fiddle。

如果您想要与旧浏览器兼容，那么mozilla博客上有一篇很好的文章描述了这种情况：http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

我曾经遇到过这个问题，我想我已经解决了这个问题，我为div设置了一个min-height属性。

哪位给了我：

+-----+ +-----+ +-----+ +-----+
|  A  | |  B  | |  C  | |  D  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+ 
+-----+ +-----+ +-----+ +-----+ 
|  E  | |  F  | |  G  | |  H  |
|     | |     | |     | +-----+
+-----+ |     | +-----+
        +-----+

Answer 3

其他解决方案（不是完全跨浏览器）是添加

.item:nth-child(4n+1) { clear: left; }

选中此http://jsfiddle.net/AfUL3/

清除每行中的最后一个浮动元素

3 个答案: