div的CSS没有间隙堆叠

Question

在这个例子中，我有3个div，用紫色边框突出显示：

它们的宽度为450像素，并向左浮动。如果它们的高度都相同，那么底部的第三个框就会很好，但它们的高度可变，我希望它们从左到右，从上到下没有间隙。

这可能吗？

Answer 1

不是没有绝对定位。要么将它们设置为相同的高度，要么只使用Javascript定位它们。

Answer 2

您可以制作2列布局，所有内容都会显示在您想要的位置 - http://jsfiddle.net/zhvFK/

Answer 3

可能可以通过使用CSS3 column选项来实现，但这些选项并不受支持，无论如何它可能不是一个好主意。

设置固定高度或将它们拆分为具有浮动div的列。

否则你需要一个相当复杂的js设置。

Answer 4

是的，您必须将div放在左侧，将div放在右侧的容器中。左边的所有部分都将在另一个向左浮动的div内部，右边的所有div都在另一个也向左浮动的div中。

示例：

http://jsfiddle.net/3XVwB/

Answer 5

尝试制作右上角的元素float: right，如下所示：

<div style="width: 350px;">
    <div style="float:left;  width: 200px; height: 100px; background-color:Purple;"></div>
    <div style="float:right; width: 150px; height: 240px; background-color:Green;"></div>
    <div style="float:left;  width: 180px; height: 200px; background-color:Red;"></div>
</div>

（here's a jsfiddle for it）