1

この順番で商品リストを注文したいです（画像添付）。各列には5行が必要で、次の5行は別の列を取得して続行します...

このリストは、li タグでループを使用して SQL クエリを介して動的に生成されます。

そのため、javascriptまたはcssでそのように注文する方法を見つける必要があります...

例

4

2 に答える 2

4

マルチカラム環境を見てください。仕様は現在推奨候補であるため、それほど変更する必要はありません。これはバージョン 10 より前の IEでは実装されていないことに注意してください。ただし、リストでも機能するはずの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 クエリのすべてのレコードが 1 つの項目に等しい場合は、次のようなものを使用できます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 に答える