Automatyczne liczenie kolumn CSS po ustaleniu maksymalnej wysokości

Question

Chcę uzyskać układ, w którym element (w moim przypadku <ul>) rozwija się do 2 (lub więcej) kolumn, gdy wysokość osiągnie określony limit.

Na przykład, jeśli wysokość jest wystarczająca tylko dla 3 elementów, a ja 5, czwarta i piąta pozycja przechodzą do drugiej kolumny, która jest tworzona tylko w razie potrzeby.

Próbowałem to zrobić poprzez ustawienie max-height jako sugerowanej here z column-count i column-width zestaw do auto poprzez columns (próbowałem ustawiając je osobno też samo zachowanie).

Jeśli z drugiej strony zmienię column-count na stałą liczbę całkowitą, to działa i równoważy elementy, ale nie jest to tak dynamiczne, jak tego potrzebuję. (Jeśli mam tylko 2 elementy, nie chcę dla nich tworzyć 2 kolumn).

Czy istnieje sposób na ustalenie wysokości, a kolumny są automatycznie dodawane, gdy wysokość nie wystarcza, aby zmieścić wszystkie elementy?

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

Przede wszystkim, aby CSS Kolumny pracy trzeba ustawić column-width lub column-count. Kolumny CSS nie będą działać, jeśli nie ustawisz żadnej z nich.

Jeśli dobrze rozumiem, musisz użyć właściwości column-fill. Niestety, tylko Firefox obsługuje go teraz. Sprawdź to code snippet (Firefox only).

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>

myślę, można użyć flex w Twoim przypadku. Zobacz 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>