सीएसएस ऑटो कॉलम-गिनती जब अधिकतम ऊंचाई तय की जाती है

Question

मैं एक लेआउट प्राप्त करना चाहता हूं जहां एक तत्व (मेरे मामले में <ul>) ऊंचाई (या अधिक) कॉलम तक फैलाता है जब ऊंचाई निश्चित सीमा तक पहुंच जाती है।

तो उदाहरण के लिए, यदि ऊंचाई केवल 3 वस्तुओं के लिए पर्याप्त है, और मेरे पास 5 है, चौथा और 5 वां आइटम दूसरे कॉलम पर जाता है, जिसे केवल तभी बनाया जाता है जब आवश्यक हो।

मैं max-heightcolumns के माध्यम से auto को column-count और column-width सेट के साथ सुझाव दिया here के रूप में सेट करके ऐसा करने की कोशिश की (मैं उन्हें अलग से भी स्थापित करने की कोशिश की, एक ही व्यवहार)।

यदि दूसरी तरफ मैं column-count को एक निश्चित पूर्णांक में बदलता हूं, तो यह आइटमों को काम करता है और संतुलित करता है, लेकिन यह गतिशील नहीं है क्योंकि मुझे इसकी आवश्यकता है। (यदि मेरे पास केवल 2 तत्व हैं तो मैं उनके लिए 2 कॉलम नहीं बनाना चाहता हूं)।

क्या ऊंचाई तय करने का कोई तरीका है, और कॉलम स्वचालित रूप से तब जोड़े जाते हैं जब ऊंचाई सभी वस्तुओं को फिट करने के लिए पर्याप्त नहीं होती है?

ul#list { 
 
    font-family: sans-serif; 
 
    list-style: none; 
 
    background: #dddddd; 
 
    max-height: 200px; 
 
    
 
    columns: auto auto; 
 
    -webkit-columns: auto auto; 
 
    -moz-columns: auto auto; 
 
    
 
    /** This works, but fixes the columns to 2, which is not what I want. 
 
    columns: 2 auto; 
 
    -webkit-columns: 2 auto; 
 
    -moz-columns: 2 auto; 
 
    */ 
 
    
 
    column-gap: 10px; 
 
    -webkit-column-gap: 10px; 
 
    -moz-column-gap: 10px; 
 
    
 
    column-rule: 1px solid black; 
 
    -webkit-column-rule: 1px solid rgba(100, 30, 30, 0.4); 
 
    -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4); 
 
} 
 

 
li { 
 
    height: 20px; 
 
    padding: 2px; 
 
}

<div id="outer"> 
 
    <ul id="list"> 
 
    <li>Item #1</li> 
 
    <li>Item #2</li> 
 
    <li>Item #3</li> 
 
    <li>Item #4</li> 
 
    <li>Item #5</li> 
 
    <li>Item #6</li> 
 
    <li>Item #7</li> 
 
    <li>Item #8</li> 
 
    <li>Item #9</li> 
 
    <li>Item #10</li> 
 
    <li>Item #11</li> 
 
    <li>Item #12</li> 
 
    </ul> 
 
</div>

सब से

Answer 1

पहले, सीएसएस कॉलम काम आप column-width या column-count सेट करने के लिए बनाने के लिए। सीएसएस कॉलम काम नहीं करेगा यदि आप इनमें से कोई भी सेट नहीं करते हैं।

यदि मैं सही समझता हूं, तो आपको column-fill संपत्ति का उपयोग करने की आवश्यकता है। दुर्भाग्यवश, केवल फ़ायरफ़ॉक्स ही इसका समर्थन करता है। यह code snippet देखें (फ़ायरफ़ॉक्स केवल)।

ul#list { 
 
    font-family: sans-serif; 
 
    list-style: none; 
 
    background: #dddddd; 
 
    max-height: 200px; 
 

 
    /* Works only in Firefox! */ 
 
    -moz-columns: 100px auto; 
 
    -moz-column-gap: 10px; 
 
    -moz-column-rule: 1px solid rgba(100, 30, 30, 0.4); 
 
    -moz-column-fill: auto; 
 
} 
 

 
li { 
 
    height: 20px; 
 
    padding: 2px; 
 
}

<div id="outer"> 
 
    <ul id="list"> 
 
     <li>Item #1</li> 
 
     <li>Item #2</li> 
 
     <li>Item #3</li> 
 
     <li>Item #4</li> 
 
     <li>Item #5</li> 
 
     <li>Item #6</li> 
 
     <li>Item #7</li> 
 
     <li>Item #8</li> 
 
     <li>Item #9</li> 
 
     <li>Item #10</li> 
 
     <li>Item #11</li> 
 
     <li>Item #12</li> 
 
    </ul> 
 
</div>

मुझे लगता है, आप अपने मामले में flex इस्तेमाल कर सकते हैं। example देखें:

ul#list { 
 
    font-family: sans-serif; 
 
    list-style: none; 
 
    background: #dddddd; 
 
    height: 200px; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: column wrap; 
 
    flex-flow: column wrap; 
 
} 
 

 
li { 
 
    height: 20px; 
 
    padding: 2px; 
 
}

<div id="outer"> 
 
    <ul id="list"> 
 
     <li>Item #1</li> 
 
     <li>Item #2</li> 
 
     <li>Item #3</li> 
 
     <li>Item #4</li> 
 
     <li>Item #5</li> 
 
     <li>Item #6</li> 
 
     <li>Item #7</li> 
 
     <li>Item #8</li> 
 
     <li>Item #9</li> 
 
     <li>Item #10</li> 
 
     <li>Item #11</li> 
 
     <li>Item #12</li> 
 
    </ul> 
 
</div>