使第二行填满上面的间隙 [英] make the 2nd line fill up the gaps above

问题描述

一个简单的html / css问题。请查看此示例，我希望第二行中的块填充其上方的空白。除了使用JavaScript吗？

A simple html/css issue. Please look at this example, I would like the blocks in the 2nd line to fill up the gaps above them. Anyway besides using 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>

推荐答案

$ b

（对不起）

Simple answer, NO.

(sorry)

这不能在vanilla HTML或CSS中实现，你需要查看一个JavaScript实现，例如 同位素 或 Masonry 或您自己制作的。

This cannot be accomplished in vanilla HTML or CSS alone, you will need to look into a JavaScript implementation like Isotope or Masonry, or one of your own making.

这篇关于使第二行填满上面的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！