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

时间:2011-09-06 11:01:24

标签: html css css-float

  

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

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

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

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

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

jsFiddle with the horizontal stacking

如何实现垂直堆叠?

1 个答案:

答案 0 :(得分: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;

}

在此处查看我的示例,了解更多How to stack divs from top to bottom in CSS

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