1. ホーム
  2. 質問と答え
  3. オーダーリスト2列の流れ

オーダーリスト2列の流れ

2012-12-10 3 views
6

誰かが、容器の高さよりも長い場合に、2つの列に流れ込むように、olを得るための、好ましくはCSSのみの技術について知っていますか？リスト内のアイテムの数が変化し、コンテナの高さが変わることがあります。オーダーリスト2列の流れ

Liをwidth:50%とfloat:leftに設定しようとすると2列になりますが、2は2列になります。私が達成したいものを

はこれです：

  1. 4. ABCDEF 5. ABCDEF
    3. ABCDEFこれは、最近のブラウザ（すなわちないIE）のために働くだろう

出典

2012-12-10 Devin Crossman

+0

これを試しましたか？ [リンク]（http://stackoverflow.com/questions/194803/automatic-two-columns-with-css-or-javascript?rq=1） 'CSSまたはJavaScriptを使用した自動2列' – sonofagun

+0

[this] （http://stackoverflow.com/a/20701658/1320764） – VoVaVc

答えて

18

ABCDEF

    • ABCDEF column-countと column-gapのルールを使用します。

    fiddle

    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を定義し、合計場合LIの
    2. の左
    3. 事前計算総数にそれらをフロート1つのDIVの容量を超えて、残りの部分を第2のDIVに入れます

    出典

    2012-12-10 00:43:43 Matanya

    関連する問題

     関連する問題