具有可变高度的浮动div（排列）

Question

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

目标：

结果：

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

我该如何解决这个问题？

Answer 1

我认为“仅”CSS 无法 100% 实现这一点，但 jquery-masonry 应该可以解决问题https://desandro.com/#masonry。好吧，但我希望有人证明我错了:)

Answer 2

您有两列。然后相应地编码：

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

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