2

変更できない特定の html があります。

<ul>
    <li class="item1">2 lines text</li>
    <li class="item2">3 lines text</li>
    <li class="item3">1 line text</li>
    <li class="item4">4 lines text </li>
    <li class="item5">4 lines text </li>
    <li class="item6">2 lines text</li>
</ul>

そして今、私はそれらを次のようにする必要があります:

 | Item 1  | Item 3 | Item 5 |
 | Item 1  | Item 4 | Item 5 |
 | Item 2  | Item 4 | Item 5 |
 | Item 2  | Item 4 | Item 5 |
 | Item 2  | Item 4 | Item 6 |
                    | Item 6 |

それらをすべて左にフロートさせるだけで、テーブルのように機能し、2 番目の行は最初の行の最も長い列の高さに合わせて垂直に配置されます。私が持っている HTML を使用して、アイテムを互いに垂直方向にちょうど 20 ピクセルにしたいのです。

私がこれまでに試したことは、float:left; です。奇数とクリア: 左; 偶数のものですが、私が得るのは、それらすべてが 1 つの列に次々と表示されることだけです。

編集: IE8+ のサポートが必要です

アイテムの順序を変更するだけではなく、フロートがどのように見えるかを避けたいので、質問をダミーテキストで編集します。

4

2 に答える 2

1

このフィドルを参照してください。

プロパティを使用してそれを行うことができcolumn-countます。

HTML

<ul>
    <li class="item1">Item 1</li>
    <li class="item2">Item 2</li>
    <li class="item3">Item 3</li>
    <li class="item4">Item 4</li>
    <li class="item5">Item 5</li>
    <li class="item6">Item 6</li>
</ul>

CSS

ul {

    margin:0;padding:0;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;

}
于 2013-03-12T11:28:31.287 に答える
0

それは可能ですdiv 。http：//jsfiddle.net/kUd8Yをいくつか追加する場合は、次のリンクを参照してください"/

于 2013-03-12T11:33:47.173 に答える