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- for-web-designers/ . または、すべての位置を修正することもできますが、これはより強引な方法です。

于 2012-05-24T20:26:37.603 に答える
0

このようなことを試すことができます - http://jsfiddle.net/HKxUf/

col クラスを持つ div で構成される 3 つの列を作成します。これらの内部に適切な div を配置します。

于 2012-05-24T20:39:10.683 に答える