javascript - 补水高度

我写这样的html代码：

#wrapper {
    width: 100%;
}
.divs {
    width: 45%;
    height: 100%;
    border: 1px solid black;
    float: left;
}

<div id="wrapper">
    <div class="divs">
        cell 1<br />
        more information
    </div>
    <div class="divs">
        cell2
    </div>
    <div class="divs">
        cell 3<br />
        more information
    </div>
    <div class="divs">
        cell 4
    </div>
</div>

在我的代码中，我的某些单元格具有信息，而其他单元格则没有。我想填充单元格1和单元格4之间的间隙。如何填充此间隙？

注意：我的单元格是动态的，我不知道计数和信息。

最佳答案

具有自己代码的CSS解决方案

我认为您会对使用flex感兴趣，它将解决您的问题。

更新

注意：此功能不适用于IE9 [如果您对此使用担心，
使用modernizr检测是否存在flex功能，并在必要时提供后备样式。 ]（来自IE10）受支持。

#wrapper {
    width: 100%;
    display: flex;
    flex-wrap:wrap;
}
.divs {
    width: 45%;
    border: 1px solid black;
}

<div id="wrapper">
    <div class="divs">
        cell 1<br />
        more information
    </div>
    <div class="divs">
        cell2
    </div>
    <div class="divs">
        cell 3<br />
        more information
    </div>
    <div class="divs">
        cell 4
    </div>
<div class="divs">
        cell 3<br />
        more information
    </div>
<div class="divs">
        cell 3<br />
        more information
    </div>
</div>

关于javascript - 补水高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45607021/