5

<ul>5番目の要素ごとに別の列を自動的に作成する1つのプレーンがある柔軟なコードを記述しようとしています。これを実現するチュートリアルを見つけましたが、アイテムを水平方向に配置しますが、垂直方向の順序が必要です。垂直方向の順序を出力する他のいくつかのチュートリアルを見たことがありますが、それぞれにclass="first"andを付けますが、これは私が望むものではありません。私は既存の HTML コードを処理しようとしています。class="second"li

私が欲しいもの:

-01     -06     -11   
-02     -07     -12
-03     -08     -13
-04     -09     -14
-05     -10     -15

私が持っているもの：

-01     -02     -03   
-04     -05     -06
-07     -08     -09
-10     -11     -12
-13     -14     -15

CSS:

ul {
    width:760px;
    margin-bottom:20px;
    overflow:hidden;
}

li {   
    float:left;
    display:inline;
}

.double li  { width:50.0%; } /* 2 col */
.triple li  { width:33.3%; } /* 3 col */
.quad li    { width:25.0%; } /* 4 col */
.six li     { width:16.6%; } /* 6 col */

HTML:

<ul class="triple">
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
  <li>06</li>
  <li>07</li>
  <li>08</li>
  <li>09</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>
4

2 に答える 2

4

このコードを使用できます：

ul
{
    -webkit-column-count: 4; -webkit-column-gap:20px;
    -moz-column-count:4; -moz-column-gap:20px;
    -o-column-count:4; -o-column-gap:20px;
    column-count:4; column-gap:20px;
}

残念ながら、すべてのブラウザで機能するかどうかはわかりません。それを実験する必要があります。

これで遊ぶjsFiddleは次のとおりです：http://jsfiddle.net/leniel/nRL4R/

于 2012-09-06T17:52:11.433 に答える
0

http://codepen.io/anon/pen/iDzmq

これが私が知っている唯一の方法です。リストをレンダリングするために使用しているコードで、5番目のliごとにul.subを追加するように設定します

質問は？

于 2012-09-06T18:03:45.743 に答える