html - 让第二行填补上面的空白

Question

一个简单的 html/css 问题。请看这个example ，我希望第二行中的 block 能够填补它们上方的空白。除了使用 JavaScript 之外还有什么？

.block {
    float: left;
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    margin: 2px 2px 0 0;
}
<div style="width: 606px;">
    <div class="block">
    </div>
    <div class="block">
    </div>
    <div class="block" style="height: 250px">
    </div>
    <div class="block">
    </div>
    <div class="block">
    </div>
    <div class="block">
    </div>
</div>

Answer 1

简单的回答，不。

(抱歉)

这不能单独在普通的 HTML 或 CSS 中完成，您需要研究像 Isotope 这样的 JavaScript 实现。或 Masonry ，或您自己制作的一个。