CSS多列布局：不正確的列拆分

Question

似乎有一個計算多列CSS屬性的錯誤，存在於我檢查過的所有瀏覽器（最新的Chrome，IE11和Firefox）中。如果列表中有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

它看起來像列 - *有不同的瀏覽器問題。在你的例子中，如果你要添加1個li元素，那麼你可以看到它將填充到第4列。我的猜測是它是一個可分解性問題。

Answer 3

它的工作方式與它應該工作的相同，9個項目的3列有足夠的空間，這就是爲什麼它不進入第4個，降低高度，它將被分成更多的列。或添加更多li將在第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>