4

複数の ul セクションがあり、複数列の css を使用してそれらを自動的に 3 つの列に分割しました。問題は、css が li コンテンツを壊し、それらを次の列に移動することです。個々の li コンテンツではなく、ul 全体を次の列に移動する必要があります。これがスクリーンショットです。

ここに画像の説明を入力

結果は好きなはずです

ここに画像の説明を入力

これは私のhtmlコードです

<div class="columnsmulti">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<ul>
<li>Lorem Ipsum123</li>
<li>Lorem Ipsum123</li>
</ul>
<ul>
<li>Lorem Ipsum456</li>
<li>Lorem Ipsum456</li>
<li>Lorem Ipsum456</li>
</ul>

</div>

これは私のcssです

.columnsmulti {
    -moz-column-count: 3; 
    -moz-column-gap: 10px;
    -moz-column-rule: 3px double #666;
    -webkit-column-count: 3; 
    -webkit-column-gap: 10px;
    -webkit-column-rule: 3px double #666;
    column-count: 3;
    column-gap: 10px;
    column-rule: 3px double #666;
}

どうやってやるの？

4

1 に答える 1

3

cssで列区切りルールを使用する必要があります。Chromeに適用される例を次に示します。

.columnsmulti ul {
    -webkit-column-break-inside: avoid;
    -webkit-column-break-after: always;
}

これらの行をcssに追加すると、要求どおりに機能します。

参照

PS：-moz-column-break私のFirefoxでは認識されないようです。

于 2012-07-02T07:53:26.357 に答える