html布局：如何垂直浮动div

Question

如何让div垂直浮动，如下图所示：

背景：我有一个复选框网格，内容按字母顺序排序，我希望垂直字母顺序进度（因为水平顺序很难遵循）。所有div都有相同的大小（宽度如图片，高度= 1行大小）。

更新：澄清一下：主要目的是根据可用的屏幕宽度设置一个包含可变数量列的表格布局，并将单元格设置为 column-major 订购。事实上不知道实际的div数。

Answer 1

CSS

.cols {
        width:20%;
        float:left;
    }
    .rows {
        height:100px;
    }

<强> HTML

 <div class="cols">
        <div class="rows">Div 1</div>
        <div class="rows">Div 2</div>
        <div class="rows">Div 3</div>
    </div>

    <div class="cols">
        <div class="rows">Div 4</div>
        <div class="rows">Div 5</div>
        <div class="rows">Div 6</div>
    </div>

    <div class="cols">
        <div class="rows">Div 7</div>
    </div>

Answer 2

如果您愿意在持有单元格的表格上设置固定高度，可以使用flexbox。

将您的保存容器设置为：

display: flex;
flex-direction: column;
flex-wrap: wrap;

您的孩子要素：

flex-grow: 20%;
min-width: 200px;

请参阅笔：http://codepen.io/anon/pen/qIpAl

Answer 3

@KunJ：网格布局的兼容性非常糟糕......仅限10 +， http://caniuse.com/css-grid

我认为没有JS你不能做的伎俩，我有同样的问题，为了解决它们，我加载所有元素，计算它们并在好的div中替换

Answer 4

虽然以下不是一个完整的解决方案，但也许其他人可以在此基础上实现必要的结果：

<强> FIDDLE

标记

div包装在容器div中

CSS

div
{
    width: 100px;
    height: 50px;
    background: orange;
    border: 1px solid yellow;
    display:block;    
}
div:nth-child(4n)
{
    display:table-cell;   
}
.container
{
    display:table;
    width: 100%;
}