html - 表の列などのリスト アイテムの自動配置 (書籍用語集スタイル)

Question

アルファベット順のリストが欲しいです。

キャッチ：

1. リスト項目は固定幅になります
2. リストの高さは固定されます。
3. アイテムは、指定された高さの後に上から開始する必要があります

参考までに画像をご確認ください。:

私がまだ得たもの

前もって感謝します！

Answer 1

CSS3列を使用すると、目的の動作を非常に簡単に実現できます。これを行う方法のサンプルを次に示します。

HTML :

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

CSS :

ul {
    -webkit-column-count: 3; /*3 is just a placeholder -- can be anything*/
    -moz-column-count: 3;
    column-count: 3;
    width: 300px; /*your fixed width*/
    height: 100px; /*your fixed height*/
}

結果:

Jquery Alternative: Taylor Smith によるすばらしいプラグインJquery column sort

それが何らかの形で役立つことを願っています！