0

liスクロールバーなしで親要素の高さに達したときにラップしたい要素のリストがあります。

これを達成するための最良の方法は何ですか？

CSS

ul{height:90px; width:100%; display:block; background-color:grey;}
li{height:20px; width:60px; background-color:red;}

html

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

ここに私のフィドル http://jsfiddle.net/nalagg/LX4Nb/

現在、このように見えます
ここに画像の説明を入力

このように見えることを望みます
ここに画像の説明を入力

編集 css ソリューションは ie9 以上でのみ可能のようです。jqueryのアイデアをお願いします。ありがとうございました

4

2 に答える 2

3

列を使用できます。ただし、これは IE9 以下では機能しません。 ul{column-count:3; -webkit-column-count:3; -moz-column-count:3;height:90px; width:100%; display:block; background-color:grey;}

残念ながら、このソリューションは自動列を許可していません。つまり、常にその数の列があり、コンテンツが収まります。

于 2013-10-10T15:23:08.373 に答える
-1

編集: 私が回答した後に質問を編集しました。

liこれをタグに追加して、 2 つの列を作成します

float:left;
width:50%;

またはこれにより、3つの列が得られます

float:left;
width:33.3%;

http://jsfiddle.net/LX4Nb/4/

于 2013-10-10T15:18:18.043 に答える