javascript - 如何在相同距离 : Solution without Masonry? float 具有可变高度的 div

Question

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

像这样的类似问题已经被问了很多，而且几乎总是使用砌体的答案:http://masonry.desandro.com/

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

什么是不需要像 masonry 或 packery 这样的库的简单 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>

Answer 1

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

您可以将 #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%;
}