1

我改变了 div（元素）的数量并在页面上对它们进行了如下排序：

1 2 3

4 5 6

7 8 9

经过测试，它会更好地使用电话簿样式，如下所示：

1 4 7

2 5 8

3 6 9

有什么简单的/css方法可以做到这一点吗？提前 Tnx

4

4 回答 4

2

鉴于您正在寻找 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 小提琴演示。

参考：

于 2012-05-24T20:30:46.863 回答
1

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

于 2012-05-24T20:28:04.673 回答
0

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

于 2012-05-24T20:26:37.603 回答
0

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

创建由具有 col 类的 div 组成的三列。在这些地方放置适当的 div。

于 2012-05-24T20:39:10.683 回答