10

olコンテナーの高さよりも長い場合に、2 つの列にフローするための CSS のみの手法が望ましいです。リスト内のアイテムの数は異なる場合があり、コンテナーの高さも変わる場合があります。

li を に設定しようとするwidth:50%とfloat:left、2 列になりますが、2 は 1 の下ではなく横になります。

私が達成したいのはこれです：

  1. abcdef 4. abcdef
  2. abcdef 5. abcdef
  3. abcdef
4

1 に答える 1

24

column-countこれは、 and column-gaprulesを使用する最新のブラウザー (つまり、IE ではない) で機能します。

フィドル

ol#two-columns {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

クロスブラウザ オプションは次のようになります。

  1. OL 内に 2 つの DIV を定義し、左にフロートします。
  2. LI の総数を事前に計算する
  3. 合計が 1 つの DIV の容量を超える場合は、残りを 2 つ目の DIV に入れます
于 2012-12-10T00:43:43.800 に答える