如何使div堆栈首先垂直然后水平？ [英] How to make div stack first vertically then horizontally?

问题描述

可能重复：

如何在CSS中从上到下堆叠div

当我有多个相邻的div与 float：left ，它们堆叠如下：

When i have multiple adjacent divs with float:left, they stack like this:

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

我想要一个这样的堆栈：

I want a stack like this:

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

jsFiddle与水平堆叠

如何实现垂直堆叠？

推荐答案

@ pinouchon;对于此类型的布局，您可以使用css3 列数属性。

@ pinouchon; for this type of layout you can use css3 column-count property for this.

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;

}

查看我的示例更多 CSS：如何将div从顶部到底部

Check my example here for more CSS : How to style divs top to bottom

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

read this article for more http://www.quirksmode.org/css/multicolumn.html

这篇关于如何使div堆栈首先垂直然后水平？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！