html布局：如何垂直浮动div

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

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

更新：澄清一下：主要目的是使表格布局具有基于可用屏幕宽度的可变列数，并使单元格按列主顺序排列。div的实际数量事先未知。

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>

第一组
第2组
第3组
第4组
第5组
第6组
第7组

@KunJ:网格布局的兼容性非常差。。。仅限ie10+，

---

我认为如果没有JS，你就无法实现这些技巧，我也遇到了同样的问题，为了解决它们，我加载了所有元素，将它们计数并替换到良好的div中

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

加成 包装在容器div中的div

CSS

---

如果您愿意在放置单元格的桌子上设置固定高度，可以使用flexbox

将容器设置为：

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

以及您的子元素，以：

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

---

查看画笔：

我假设HTML顺序是div1、div2、div3等？您是否提前知道

s的数量？如果不使用Javascript，我无法想出解决方案。如果使用CSS，这可能会很难。我想你可以使用列：@gvee:no，内容可以有任意数量的复选框，也可以添加一些解释！！：）这是不对的，OP说可以有任意数量的盒子。这是行不通的。同样的结果也可以用一个好的旧表来实现。只要添加最小宽度（如我的问题中明确指定的），您的解决方案就会中断，因为它不会浮动单个元素，而是浮动整个列。@ruddy:垂直和水平方向上必须有固定数量的框。您不能在1024像素的页面中放置无限框。这就是结构。有人可以根据需要轻松修改它。@DipakKumarPusti您所做的只是使用

div

制作了一个非常糟糕的表。同样，这不是OP的要求。这就是他们试图避免的。我担心你是对的。很明显，html/css无法完成它所要完成的任务。诸如此类的事情，默认的疯狂盒模型，以及在没有恶意攻击的情况下不可能有相同高度的float div列，真的让我觉得html/css设计者的主要意图是让尽可能多的人陷入完全的疯狂！！！

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