2

<li>-Container内の の動的フローティング レイアウトに関する質問があり<ul>ます。 例

灰色のコンテナ<ul>の高さは 150px に固定されており、その中のすべて<li>の は最大高さ 150px を使用し、次の列に配置する必要があります (要素 7、8 を参照)

解決策は明らかだと確信していますが、幅と高さを使用していくつかのフロートの組み合わせを試すことに固執しています。

誰かの提案や解決策はありますか?

4

3 に答える 3

4

CSS3 列を使用できます: " CSS Multi-column Layout Module ":

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
    max-height: 20px;
}

ul > li {
    height: 20px;
}

デモ

http://jsfiddle.net/UTfD9/

サポート

これは次の場所で機能します。

  • サファリ
  • クロム
  • ファイアフォックス
  • IE10+
  • オペラ 11+

参照: CSS3 複数列レイアウトを使用できますか?

于 2013-03-04T15:21:53.753 に答える
2

http://www.w3schools.com/css3/css3_multiple_columns.asp

https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts

CSS の複数列レイアウトは、ブロック レイアウト モードを拡張して、複数列のテキストを簡単に定義できるようにします。行が長すぎると、テキストを読むのに苦労します。ある行の終わりから次の行の最初に目が移動するのに時間がかかりすぎると、どの行にいたのかわからなくなります。したがって、大画面を最大限に活用するには、新聞のように幅を制限したテキスト列を並べて配置する必要があります。

残念ながら、これを CSS と HTML で行うには、列区切りを固定位置に強制するか、テキストで許可されるマークアップを厳しく制限するか、大胆なスクリプトを使用する必要があります。この制限は、新しい CSS プロパティを追加して従来のブロック レイアウト モードを拡張することで解決されます。

于 2013-03-04T15:21:40.273 に答える
0

li列に収まる要素の数を計算し、pseudoセレクター ( nth-child) を使用して列に分割できます。私が作成したデモを参照してください: http://jsfiddle.net/QqudC/1/

于 2013-03-04T15:25:38.233 に答える