是否可以将可变大小的浮动div包裹/粘贴/流动到彼此？

Question

我正在尝试将div块列表与2列相对应，这些列具有不同的高度，将它们相互浮动。如果每个块的大小都是固定的，它们将自然地相互堆叠，但是因为这个块涉及不同的高度，对于更高的块，相邻的块将在下面有很多空白区域，然后继续下一个块。 / p>

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

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

您可以看到我的意思here。

第二列的所有东西都很合适，但在左侧，有很多空格可以容纳更大的尺寸。

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中有一种方法可以做到这一点，但目前它缺乏浏览器支持。