如何使div先垂直然后水平堆叠？ [复制]

【问题标题】：How to make div stack first vertically then horizontally? [duplicate]如何使div先垂直然后水平堆叠？ [复制]
【发布时间】：2012-05-12 00:21:43
【问题描述】：

可能重复：
How to stack divs from top to bottom in CSS

当我有多个带有float:left 的相邻 div 时，它们会像这样堆叠：

 _______
| 1 2 3 |
| 4 5   |
|_______|

我想要这样的堆栈：

 _______
| 1 4   |
| 2 5   |
|_3_____|

jsFiddle with the horizontal stacking

如何实现垂直堆叠？

【问题讨论】：

这是一个很好的问题，但为什么要放在首位呢？您想填充用户显示的空间然后继续滚动以查看更多...看来您正在使用某个移动网站左右

标签： html css css-float

【解决方案1】：

@pinouchon;对于这种类型的布局，您可以使用 css3 column-count property。

CSS：

div#multicolumn1 {
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        column-count: 2;
        column-gap: 10px;

}

在此处查看我的示例以获取更多信息How to stack divs from top to bottom in CSS

阅读这篇文章了解更多http://www.quirksmode.org/css/multicolumn.html

【讨论】：

这个doesn't work for IE, at all。
是的； css3 column-count 属性在 IE 中不起作用，您可以使用 js csscripting.com/css-multi-column 将其放在 IE 评论中。
这在技术上不是一个正确的解决方案，因为 css 将优先考虑水平然后垂直，为了证明尝试只有 2 个项目。 OP的问题似乎要优先考虑垂直然后水平。要优先考虑垂直然后水平，请查看 display: flex;弹性方向：列； flex-wrap: 换行；