浮动高度可变的 div（排列）答案

【问题标题】：Float divs with variable heights (arrange)浮动高度可变的 div（排列）
【发布时间】：2012-05-18 03:42:34
【问题描述】：

关于高度可变的浮动 div 的排列，我遇到了一个简单的问题。

目标：

结果：

我只有带有 css float: left; 的 div 容器并且没有定义高度。第一个红色圆圈表示我的技术失败了，尽管第二个红色圆圈通过显示它正在工作来证明我错了。不幸的是，最后一个（不是在屏幕截图上）只是在前一个的高度之后开始浮动（所以左边有一个完整的空白区域）。

我应该如何解决这个问题？

谢谢！

【问题讨论】：

【解决方案1】：

我不认为使用“just”css 100% 可行，但 jquery-masonry 应该可以解决问题 [http://desandro.com/resources/jquery-masonry/]。好吧，但我希望有人证明我错了:)

【讨论】：

【解决方案2】：

您有两列。然后进行相应的编码：

<div class="column">
    contents of first column
</div>
<div class="column">
    contents of second column
</div>

（您在 DIV 列上设置 float:left）

【讨论】：

我有超过 2 个，但他说的是 Hannes 列。所以这个解决方案会很好，除了这个网站将是一个 .NET 数据库网站，这使得静态列的使用成为一个问题。让列动态填满内容会很麻烦。不过还是谢谢！
第一张图片中呈现的布局由两个独立的列组成。