如何首先垂直然后水平制作div堆栈?

Ben*_*ier 6 html css css-float

可能重复:
如何在CSS中从上到下堆叠div

当我有多个相邻的div时float:left,它们堆叠如下:

 _______
| 1 2 3 |
| 4 5   |
|_______|
Run Code Online (Sandbox Code Playgroud)

我想要一个像这样的堆栈:

 _______
| 1 4   |
| 2 5   |
|_3_____|
Run Code Online (Sandbox Code Playgroud)

jsFiddle与水平堆叠

如何实现垂直堆叠?

san*_*eep 5

@ 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;

}
Run Code Online (Sandbox Code Playgroud)

在这里查看我的示例了解更多如何在CSS中从上到下堆叠div

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

  • 从技术上讲,这不是一个正确的解决方案,因为 CSS 会优先考虑水平方向,然后是垂直方向,为了证明尝试只包含 2 个项目。OP的问题似乎要优先考虑垂直,然后是水平。要优先考虑垂直然后水平,请查看 display: flex; 弹性方向:列;弹性包裹:包裹; (2认同)