css - 是否有可能使可变大小 'wrap'/stick/flow 的 div 相互 float ？

Question

我正在尝试通过将具有不同高度的 2 列相互 float 来对齐 div block 列表。如果每个方 block 的大小都是固定的，它们自然会整齐地堆叠在一起，但是因为这个涉及到不同的高度，对于更高的方 block ，相邻的方 block 下面会有很多空白，然后才能继续下一个方 block 。

但是，我注意到这只发生在一侧，如果 block 向左浮动，那么右边的列 block 将自动填充任何空白，反之亦然。

不过，我现在正在努力寻求一种解决方案，以实现双方的流动性。

你可以看到我的意思的一个例子here .

第 2 列的所有内容都非常合适，但在左侧，有很多空白空间用于更高的尺寸。

CSS 是这样的:

.container {
    width: 600px;
}
.item {
    width: 250px;
    height:  auto;
    background: darkgray;
    border: 1px solid black;
    float: left;
    margin: 5px 0 0 5px;
    padding: 5px;
}

Answer 1

您有 3 个选项，每个选项都有缺点。

1. 编写一个 JavaScript 解决方案将计算每个元素开始位置，然后重新定位每个一个相应地使用相对定位。

2. 更改您的标记，以便两个容器列反对花车。你必须在两人之间分配元素以编程方式。

3. 使用表格，以便每个元素的高度与它旁边的高度匹配。

显然，后两个在语义上不是很合理，第一个可能不切实际，具体取决于元素列表可能变得有多大。我相信在 CSS 3 中有一种方法可以做到这一点，但目前它缺乏浏览器支持。