Result
リストを自動で任意の列数に振り分ける、みたいなの。マルチカラムレイアウトを使います。
リスト分けたいだけならテキストコンテンツのようにbreak-insideやpage-break-insideを考えなくていいので楽ですね。
CSSではなくJavaScriptを使う方法は過去に書いてます。jQueryを使いますが・・
→リストを任意のカラム数に分ける
css
.columns {/*分けたいリストの親要素に指定する。column-countはカラム数*/ column-count: 3; column-gap: 26px; list-style: none; margin: 0; padding: 0;} |
html
<ul class="columns"><li><label><input type="checkbox" />1 lorem ipsum</label></li><li><label><input type="checkbox" />2 lorem ipsum</label></li><li>・・・</ul> |
can i use
column-countの各ブラウザのサポート状況です
