CSS [DIV-Tableless] 垂直堆叠不同高度填补空白？

Question

我有不同的 DIVS 向左浮动 (float:left)，它们具有不同的高度。 我需要像附加图像一样堆叠这个 div:

http://www.krazy.es/images-stackov/capture-divs.jpg

Answer 1

看起来带有“容器 5”的 DIV 有一个 clear:left; 或 clear:both; 在 CSS 中设置。

编辑

没关系，您的所有 div 都向左浮动。下面是一些示例代码:

Sample Code on jsfiddle.net

如果调整窗口的宽度，您会注意到 div 会尝试填满所有可用的水平空间。您看到的困惑是由具有不同垂直高度的 div 造成的。如果满足以下条件，您将获得所需的结果:

1. > They all had the same height (即他们都有 2 行文本)
2. > You assigned a height value to each div with height:90px; (设置为最大公分母)
3. 或 you decided to only have 3 columns of divs max ，即使浏览器窗口足够宽以容纳更多内容。他们可以将容器 1、2 和 3 放在顶部的一个 div 中，将容器 4、5 和 6 放在下面的另一个 div 中
4. 最后(为了完整性)，you can put container 1 & 4 in a div, container 2 & 5 in a div, and container 3 & 6 in a div, and then float those divs left .这也会为您提供 3 列，但限制太多，我不推荐它 ( you can also set the height on the floated divs for better alignment )。

选项 #2 是我的最爱。