Układ wielu kolumn CSS: niepoprawne dzielenie kolumn

Question

Wygląda na to, że wystąpił błąd w obliczaniu właściwości wielu kolumn css, obecnych we wszystkich przeglądanych przeze mnie przeglądarkach (najnowszy Chrome, IE11 i Firefox). Jeśli masz 9 pozycji na liście i próbujesz podzielić je na 4 kolumny, ostatnia kolumna jest zawsze pusta.

Czy są jakieś obejścia, coś, co je podzieli 3/2/2/2? Z góry dziękuję.

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

Użyj tego:

.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

Wygląda na to, że kolumna- * ma wiele problemów z różnymi przeglądarkami. W twoim przykładzie, jeśli dodałeś jeszcze 1 element li, zobaczysz, że wypełni się on w czwartej kolumnie. Domyślam się, że jest to kwestia podzielności.

Answer 3

Działa w ten sam sposób, w jaki powinien działać, jest wystarczająco dużo miejsca w 3 kolumnach na 9 elementów, dlatego nie wchodzi w czwartą, zmniejsza wysokość, a zostanie podzielony na więcej kolumn. lub dodać więcej li że pójdzie w 4 kolumnie

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>