Столбец-счетчик УСБ автоматически, когда Макс-высота фиксируется

Я хочу добиться компоновки, в которой элемент (в моем случае a <ul>) расширяется до 2 (или более) столбцов, когда высота достигает определенного предела.

Так, например, если высоты хватает только на 3 элемента, а у меня 5, то 4-й и 5-й элемент идут во второй столбец, который создается только в случае необходимости.

Я попытался сделать это, установив max-height, как было предложено здесь С column-count и column-width, установленными в auto через columns (я попытался установить их отдельно тоже, то же самое поведение).

Если, с другой стороны, я изменяю 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>
1 8
html css css3 multiple-columns

1 ответ:

Прежде всего, чтобы заставить работать столбцы CSS , необходимо задать column-width или column-count. Столбцы CSS не будут работать, если вы не установите ни один из них.

Если я правильно понимаю, вам нужно использовать свойство column-fill. К сожалению, сейчас его поддерживает только Firefox. Проверьте этот фрагмент кода (только Firefox ).

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 в вашем случае. Видеть пример : 

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>
7