CSSの複数の列のレイアウト：間違った列の分割

Question

私がチェックインしたすべてのブラウザ（最新のChrome、IE11、Firefox）には、複数列のCSSプロパティの計算にバグがあるようです。あなたのリストに9つの項目があり、それを4列に分割しようとすると、最後の列は常に空です。

3/2/2/2に分割する回避策はありますか？前もって感謝します。

ul { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    background-color: gray; 
 
} 
 
li { 
 
    background-color: tomato; 
 
}

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

Answer 1

使用この：

.keeptogether{ 
display:inline-block; 
width:100% 
} 

ul { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    background-color: gray; 
 
} 
 
li { 
 
    background-color: tomato; 
 
} 
 
.keeptogether { 
 
    display: inline-block; 
 
    width: 100% 
 
}

<ul> 
 
<div class="keeptogether"> 
 
    <li>item</li> 
 
    <li>item</li> 
 
    <li>item</li> 
 
</div> 
 
<div class="keeptogether"> 
 
    <li>item</li> 
 
    <li>item</li> 
 
</div> 
 
<div class="keeptogether"> 
 
    <li>item</li> 
 
    <li>item</li> 
 
</div> 
 
<div class="keeptogether"> 
 
    <li>item</li> 
 
    <li>item</li> 
 
</div> 
 
</ul>

Answer 2

http://caniuse.com/#feat=multicolumn

column- *にはさまざまなブラウザで大きな問題があるようです。あなたの例では、1つ以上のli要素を追加する場合は、それが4列目に埋め込まれることがわかります。私の推測は、その分裂の問題です。

Answer 3

これは動作しているのと同じように動作しています.3つの項目には3つの項目に十分なスペースがあります。なぜなら、4番目には入り込まず、高さを減らし、より多くの列で分割するからです。または列の数は正確に4であるが、あなたはもう一つの `li`を追加した場合ので、列ごとの最小項目が3項目あり、それはで表示されますその4列目に移動します

ul { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    background-color: gray; 
 
    height:50px; 
 
} 
 
li { 
 
    background-color: tomato; 
 
}

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