1

我想按此顺序订购物品清单（附图片）。每列应该有 5 行，然后接下来的 5 列得到另一列并继续......

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

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

例子

4

2 回答 2

4

看看多列环境。该规范目前是一个候选推荐，所以它不应该有太大变化。请记住，这在IE 10 之前的版本中没有实现，但是有一个JavaScript 后备应该可以工作，即使在列表上也是如此。

<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.

演示

于 2012-07-29T19:10:18.043 回答
1

你可以在这里找到一个很好的例子。 http://www.alistapart.com/d/multicolumnlists/example1.html在此处输入链接描述

您还可以创建以 1、6 和 11 开头的 3 个列表。在这种情况下，您根本不需要 css 或 js。像这样：

<ol start="1">....</ol>
<ol start="6">....</ol>
<ol start="11">....</ol>
于 2012-07-29T19:04:20.147 回答