Question

一个简单的html / css问题。请看这个example，我希望第二行中的块填补它们上方的空白。无论如何使用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

简单回答，不。

（对不起）

仅在vanilla HTML或CSS中无法实现这一点，您需要查看Isotope或Masonry等JavaScript实现，或者您自己制作的实现。

Answer 2

如果您愿意使用CSS3，那么列可以帮助您将块叠加起来。

演示：http://jsfiddle.net/abhitalks/bLUrU/5/

示例CSS ：

.container {
    -webkit-columns: 3;        /* create three columns */
    -webkit-column-gap: 2px;   /* have 2px gap between the columns */
}
.block {
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    margin: 2px 2px;
    -webkit-column-break-inside: avoid; /* avoid breaking contents across columns */
}

除-webkit之外，根据需要添加其他供应商前缀。

当然，通过使用列，您必须重新查看div的排序。 就像这里：http://jsfiddle.net/abhitalks/bLUrU/6/

Answer 3

将float:right添加到第三个块

<div style="width: 606px;">
    <div class="block">
    </div>
    <div class="block">
    </div>
    <div class="block" style="height: 250px;float:right;">
    </div>
    <div class="block">
    </div>
    <div class="block">
    </div>
    <div class="block">
    </div>
</div>

使第二行填补上面的空白

3 个答案:

简单回答，不。