javascript - 我如何使用 css 或 javascript 订购这样的 html 列表？

Question

我想按此顺序订购商品 list (附图片)。每列应该有 5 行，然后接下来的 5 列得到另一列并继续......

这个列表是通过在 li 标签上循环的 sql 查询动态生成的。

所以我只需要找到一种在 javascript 或 css 中以这种方式排序的方法...

Example

Answer 1

看看多列环境。 specification目前是候选推荐，所以应该不会有太大变化。请记住，这没有在 IE prior to version 10 中实现。 ，但是有一个 JavaScript fallback这应该有效，即使在列表上也是如此。

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
</ol>

ol{
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count: 2;
}

请注意，您必须在某处指定列的实际数量。但是，如果您的 SQL 查询的每条记录都等于一个元素，您可以只使用类似 count($result)/5 的内容。

Demo