javascript - 如何在相同距离上 float 高度可变的div:无砌体的解决方案？

如何将固定宽度但可变高度的浮动div放置在彼此相同的垂直距离上？

诸如此类的类似问题已经被问了很多，几乎总是使用砌筑的答案：http://masonry.desandro.com/

砌体是一个很好的解决方案，但砌体的作用超出了需要。

什么是简单的jquery / css解决方案，不需要像砌体或包装厂（http://packery.metafizzy.co/）这样的库？

问题：



预期结果：



图片来自以下问题：Floating divs with variable height

相关问题：

CSS Floating Divs At Variable Heights

Floating divs with variable height

HTML示例：

<style>
    #wrapper {
        width: 400px;
        overflow: hidden;
    }

    .block {
        width: 180px;
        float: left;
        background-color: green;
        margin: 5px;

    }
</style>

<div id="wrapper">
    <div class="block" style="height:100px;">
    </div>
    <div class="block" style="height:200px;">
    </div>
    <div class="block" style="height:140px;">
    </div>
    <div class="block" style="height:70px;">
    </div>
    <div class="block" style="height:120px;">
    </div>
    <div class="block" style="height:170px;">
    </div>
</div>

最佳答案

对于支持CSS列的现代浏览器，可以使用Radu Chelariu在Sick Designer上发布的this技术。

您可以将#wrapper元素配置为具有3列，如下所示：

#wrapper {
    -moz-column-count: 3;
    -moz-column-gap: 5px;
    -webkit-column-count: 3;
    -webkit-column-gap: 5px;
    column-count: 3;
    column-gap: 5px;
    width: 400px;
}

#wrapper div.block {
    display: inline-block;
    /* Display inline-block, and absolutely NO FLOATS! */
    margin-bottom: 20px;
    width: 100%;
}

关于javascript - 如何在相同距离上 float 高度可变的div:无砌体的解决方案？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28314402/