列中的多个div框，垂直排序

Question

我更改了div（元素）的数量，并在页面上按如下顺序排序：

1 2 3

4 5 6

7 8 9

经过测试后，它的电话簿风格会更好，如下所示：

1 4 7

2 5 8

3 6 9

有没有简单/ css的方法呢？ Tnx提前

Answer 1

鉴于您正在寻找CSS3解决方案，为什么不简单地使用column-count：

body {
    -webkit-column-count: 3;
    -o-column-count: 3;
    -moz-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
}
.box {
    width: 4em;
    height: 4em;
    line-height: 4em;
    counter-increment: box;
}

JS Fiddle demo

参考文献：

• column-count。

Answer 2

您可以尝试使用jquery columnizer插件。 我已多次使用jquery.columnizer：http://welcome.totheinter.net/columnizer-jquery-plugin/

Answer 3

您可以在css中使用网格布局对它们进行排序，并让它们浮动，使用其中之一来生成它http://www.webdesignbooth.com/15-extremely-useful-css-grid-layout-generator-for-web-designers/。或者你可以修复他们所有的位置，这将是一种更蛮力的方式。

Answer 4

你可以尝试这样做 - http://jsfiddle.net/HKxUf/

创建三个由div和col类组成的列。在这些地方内部适当的div。