html - 自动排列列表项，如表格列(书籍词汇表样式)

Question

我想要一个按字母顺序排列的列表。

要点:

1. 列表项将具有固定宽度
2. 列表将具有固定高度。
3. 元素应在指定高度后从顶部开始

请查看图片以供引用。

What i got yet

提前致谢!

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 替代方案:Taylor Smith 的一个很棒的插件 Jquery column sort

我希望能以任何方式提供帮助!