7

次のようなアイテムのリストを作成しようとしています。

フローティングリスト

主な要件は、コードに触れることなくリスト項目を追加または削除できるように、リストが柔軟であることです。

私がこれまでに見つけた最善の解決策は、すべてのリスト項目 (ヘッダーを含む) を<li>タグに入れ、このA List Apart 記事で紹介されている手法のいずれかを使用してスタイルを設定することです。

<ul>
  <li class="header">Drinks</li>
  <li>Drink 1</li>
  <li>Drink 2</li>
  <li>Drink 3</li>
  <li class="header">Meat</li>
  <li>Meat 1</li>
  <li>Meat 2</li>
  <li>Meat 3</li>
  <li>Meat 4</li>
  <li>Meat 5</li>
  <li>Meat 6</li>
  etc.
</ul>

ここで Stack Overflow にもっと良い提案があるかどうか疑問に思っていました。

4

6 に答える 6

5

おそらく、(javascript を使用せずに) これをきれいに実現できる唯一の方法は、column-countCSS プロパティを使用することです。ただし、IE は 10 以上からのみサポートしています: http://caniuse.com/multicolumn

ここにデモがあります：http://jsbin.com/efiqov/2/

また、ヘッダーはリスト アイテムではなく、ヘッダーである必要があります。

于 2012-07-09T10:19:48.830 に答える
2

古いブラウザをサポートする必要がない限り、CSS3マルチカラムを使用できます...

http://www.quirksmode.org/css/multicolumn.html

次に、カテゴリごとに順序付けされていないリストを使用します。

于 2012-07-09T10:08:47.470 に答える
2

css3 の複数列を使用すると、これを簡単に克服できます。また、つまりブラウザの場合は、スクリプトも使用できます。詳細については、リンクを参照してください

http://www.cvwdesign.com/txp/article/360/multi-column-layout-with-css3-and-some-javascript

于 2012-07-09T10:30:30.683 に答える
1

前処理を行う完全な機能があり、高さが固定さ<li>れているため、PHP で次のことを検討してください。

$menu=array(
    "header" => "Drinks",
    "item" => "Drink 1",
    "item" => "Drink 2",
    "item" => "Drink 3",
    "item" => "Drink 4",
    "header" => "Meats",
    "item" => "Meat 1",
    "item" => "Meat 2",
    "item" => "Meat 3",
    "item" => "Meat 4"
);

$item_count = 0;
$items_per_column = 5;

echo "<ul>";
foreach($menu as $key=>$value)
{
    if($item_count % $items_per_column == 0)
    {
        echo "</ul><ul>";
    }

    $item_count ++;

    echo "<li class='".$key."'>".$value."</li>";
}
echo "</ul>";

それはテストされていませんが、問題なく動作するはずです。<ul>それぞれに aを与えるだけで、float: left隣同士にスタックします。

于 2012-07-09T10:57:28.760 に答える
1

基本的にこれだけで十分です。css3、js、php は不要で、どのバージョンのブラウザでも動作します。

4 つの列

li {width: 25%; float: left;}

<ul>
<li>content</li>
<li>content</li> etc.
</ul>

3列

li {width: 33%; float: left;}

<ul>
<li>content</li>
<li>content</li> etc.
</ul>

等。

少ないほどよい、シンプルさを取り入れましょう!

于 2013-06-02T18:55:04.673 に答える