2

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

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

但是，我现在正试图寻求一种解决方案来实现双方的流动性。

你可以在这里看到我的意思的一个例子。

第 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;
}
4

1 回答 1

1

你有 3 个选项都有它的缺点。

  1. 编写一个 JavaScript 解决方案，计算每个项目的起始位置，然后使用相对定位相应地重新定位每个项目。

  2. 更改您的标记，以便有两个容器列是相反的浮动。您必须以编程方式在两者之间分配项目。

  3. 使用一张桌子，使每个项目的高度与它旁边的高度相匹配。

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

于 2009-09-03T01:54:09.273 回答