我怎么漂浮起来？

Question

给出一系列不同高度的盒子

<div class="collection">
    <div style="height:50px">1</div>
    <div style="height:80px">2</div>
    <div style="height:60px">3</div>
    <div style="height:40px">4</div>
    <div style="height:80px">5</div>
    <div style="height:50px">6</div>
    <div style="height:60px">7</div>
    <div style="height:40px">8</div>
</div>

和一些jquery给它们独特的颜色（用于调试）

$('.collection>div').each(function (n) {
    $(this).css('backgroundColor', 'hsla(60, ' + n*10 + '%, 45%, 1)');
});

如何在“合理”栏中显示它们？我可以解释的最好的方法是，是否存在float:up适用于具有相同宽度和不同高度的方框，与float:left对于相同高度但宽度不同的方框的方式相同。

对于float: left，对于不熟悉的人来说，排序似乎是随机的，并且在内部和底部和右边都会给出很多丑陋的空间（.collection上的填充应该只是框之间间距的三分之一）：

.collection { 
    outline: 1px dotted blue; 
    padding: 5px;
    overflow: hidden;  /* clearfix */
}
.collection > div { 
    margin: 0 15px 15px 0;
    width: calc((100% - 2 * 15px) / 3);  /* doesn't work */
    width: calc(33% - 14px);             /* magic 14..? */
    float: left;
}

https://jsfiddle.net/mojx8rre/1/

我试过column-count：

.collection { 
    -webkit-column-count: 3; 
    -moz-column-count: 3;
    column-count: 3;
    height: 200px; 
    outline: 1px dotted blue; 
    padding; 5px;
}
.collection > div { 
    margin-bottom: 15px;
}

https://jsfiddle.net/25c4g8a8/2/

但是在例如。 Chrome和Firefox以及盒子最终切成薄片 - 有时只有一列中的条子。铬：

VS。火狐：

Answer 1

您可以尝试flexbox。它是一个CSS布局，没有插件或框架，只是简单的旧CSS。请参阅下面的演示：

DEMO

<强> CSS

/* Defaults */
 html {
    box-sizing: border-box;
    font: 400 16px/1.45 'Source Code Pro';
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
}
body {
    width: 100vw;
    height: 100vh;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 .collection {
    /* Flexbox Properties */
    /* https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties */      
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    outline: 1px dotted blue;
    padding: 5px;
    overflow: hidden;
    /* Limited height to coincide with examples */
    height: 100%;
    max-height: 250px;
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
}
.collection > div {
    margin: 0 15px 15px 0;
    width: calc((100% - 2 * 15px) / 3);
    width: calc(33% - 14px);
}