用于无间隙堆叠div的CSS

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

它们的宽度为450像素，向左浮动。如果它们都是相同的高度，底部的第三个框就可以了，但是它们的高度是可变的，我希望它们从左到右，从上到下流动，没有任何间隙

---

这可能吗？

没有绝对定位就不行。要么让它们都具有相同的高度，要么就用Javascript定位它们。

使用CSS3选项可能是可行的，但是这些选项并没有得到很好的支持，而且可能也不是一个好主意

设置固定高度或使用浮动div将其拆分为列

---

否则，您将需要一个相当复杂的js设置。

是的，您必须将div放在各个容器中的左侧和右侧。左侧的所有div将位于另一个向左浮动的div内，右侧的所有div将位于另一个也向左浮动的div内

例如：

---

您可以创建一个两列布局，所有内容都将按您的需要显示-

尝试将右上角元素

浮动：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>

---

（）

如果您使用jQuery，则有一个名为Mashine的插件正好可以做到这一点。这是一个非常棒的插件+1.