सीएसएस एकाधिक कॉलम लेआउट: गलत कॉलम विभाजन

Question

मल्टी कॉलम सीएसएस प्रॉपर्टी की गणना में एक बग प्रतीत होता है, जो मैंने देखा है (नवीनतम क्रोम, आईई 11 और फ़ायरफ़ॉक्स) में मौजूद सभी ब्राउज़रों में मौजूद है। यदि आपकी सूची में 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 और ली तत्व जोड़ना चाहते हैं, तो आप देख सकते हैं कि यह 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>