0

HTML ページに特定の ul リストがあります。

<div class="multicolumns">
  <ul>
    <li>Main 1</li>
    <li>Main 2
      <ul>
        <li>Sub 1</li>
        <li>Sub 2</li>
        <li>Sub 3</li>
      </ul>
    </li>
    <li>Main 3</li>
    <li>Main 4</li>
  </ul>
</div>

マルチカラム css を使用して、リストを 3 カラムで自動的に作成しました。しかし問題は、サブリストが新しい列に分割されることです。メインヘッドの下にある必要があります。そのために、次のcssを試しました。

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

.multicolumns li {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

期待される結果：

ここに画像の説明を入力

しかし、それは機能していません。これを修正する方法は？

4

1 に答える 1

0

あなたの例は、私にとってChromeで機能します。

それ以外の場合、 http://caniuse.com/#feat=multicolumnによると、ほとんどのブラウザーはこれをサポートしていません。

それとは別に、間違ったプロパティ名を使用しています。break-insideこれは ではなくと呼ばれているため、Firefox がサポートする場合column-break-insideはそうなるでしょう。-moz-break-insideWebkit のみが非標準の を使用します-webkit-column-break-inside。

于 2013-04-29T09:15:29.533 に答える