html - リストに特定の高さを与えて、隣の新しい列に移動するにはどうすればよいですか?

Question

リスト (< ul >) に特定の高さなどを与えることは可能ですか?

私はそれをここに示しました：

赤いボックスには特定の高さがあります。利用可能なスペースよりも多くのアイテムがある場合、私の例の「List7、List8、List9」のように、それらを次の行に移動するだけです。

score 1 · Accepted Answer

はい、次を使用してできますcolumn-count：

ul {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    height: 60px;
    width: 300px;
}

ただし、これはすべてのブラウザーでサポートされているわけではありません。javascript プラグインを使用してポリフィルするか、プログレッシブエンハンスメントを使用することができます (結局のところリストです)。

score 1 · Accepted Answer

CSS の column-count を次のように使用します。

ul {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

普遍的にサポートされているわけではありませんが、挑戦的なブラウザーはそれを無視します. それらの場合、手動で複数の UL に分割してそれらをフローティングするか、同様に恐ろしいことを行うなど、セマンティックでないことを行う必要があります。

score 0 · Accepted Answer

手っ取り早い方法は、次のようfloatなliタグです。

ul
{
    height: 100px;
    border: 1px solid #f00;
}

li
{
    float: left;
    border: 1px solid #0f0;
    width: 50px;
}

しかし、これにより次の構造が得られます。

List1    List2    List3
List4    List5

提供された画像の構造が特に必要な場合は、jQuery を使用した動的レンダリングを調べて、ブラウザーを完全にサポートする必要がある場合があります。

3 に答える 3