html布局：如何垂直浮动div答案

【问题标题】：html layout: how to float divs verticallyhtml布局：如何垂直浮动div
【发布时间】：2014-05-23 06:04:28
【问题描述】：

如何让 div 像这张图片一样垂直浮动：

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

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

【问题讨论】：

我假设 HTML 的顺序是 div1、div2、div3 等？
你提前知道</div>s的数量吗？
如果不使用 Javascript，我无法提出解决方案。仅使用 CSS 可能很难
我想你可以使用列：columns on MDN 和 columns on canIuse
@gvee：不，内容可以有任意数量的复选框

标签： html css layout

【解决方案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>

【讨论】：

也考虑添加一些解释！！ :)
这不正确，OP 说可以有任意数量的盒子。这行不通。
用一张好的旧表也可以达到同样的效果。一旦您添加了最小宽度（就像我的问题中明确指定的那样），您的解决方案就会中断，因为它不是浮动单个元素而是整个列。
@ruddy：垂直和水平方向的盒子数量必须是固定的。您不能在 1024 像素页面中放置无限框。这只是结构。有人可以根据需要轻松修改。
@DipakKumarPusti 你所做的只是使用div 制作了一张非常糟糕的表格。同样，这不是 OP 所要求的。这就是他们试图避免的。

【解决方案2】：

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

将您的容器设置为：

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

和你的子元素：

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

看笔：http://codepen.io/anon/pen/qIpAl

【讨论】：

【解决方案3】：

@KunJ : 网格布局的兼容性很差... ie10 + only, http://caniuse.com/css-grid

我认为没有 JS 你无法做到这一点，我遇到了同样的问题，为了解决它们，我已经加载了所有元素，计算它们并替换在好的 div 中

【讨论】：

我担心你是对的。显然 html/css 不能完成它的任务。像这样的事情，默认的疯狂盒子模型，以及不可能有相同高度的浮动 div 列而没有肮脏的 hack，真的让我认为 html/css 设计者的主要目的是让尽可能多的人陷入疯狂！！！

【解决方案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%;
}

【讨论】：