次のように、div (要素) の数を変更し、ページ上で並べ替えています。
1 2 3
4 5 6
7 8 9
テストしたところ、次のような電話帳スタイルの方が適切に機能します。
1 4 7
2 5 8
3 6 9
そうする簡単な/CSSの方法はありますか? 事前にTnx
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;
}
参考文献:
jquery columnizer プラグインの使用を試すことができます。私は何度か jquery.columnizer を使用して成功しました: http://welcome.totheinter.net/columnizer-jquery-plugin/
css でグリッド レイアウトを使用してそれらを並べ替え、フロートさせ、これらのいずれかを使用して生成することができます http://www.webdesignbooth.com/15-extremely-useful-css-grid-layout-generator- for-web-designers/ . または、すべての位置を修正することもできますが、これはより強引な方法です。
このようなことを試すことができます - http://jsfiddle.net/HKxUf/
col クラスを持つ div で構成される 3 つの列を作成します。これらの内部に適切な div を配置します。