Неупорядоченные списки: ограничение количества элементов списка перед началом нового столбца

Question

Мой мозг зажарен, поэтому я прошу прощения, если это кажется чрезвычайно простым:

У меня есть неупорядоченный список:

<ul class="activeList">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
</ul>

И все, что я пытаюсь сделать, это заставить егоотображать вертикально в два столбца, но после пункта 4, чтобы начать второй столбец.Так бы это выглядело так:

Item 1   |   Item 5
Item 2   |   Item 6
Item 3   |
Item 4   |

Я пробовал плавающие и столбцы в CSS, но лучшее, что я могу получить, это:

Item 1   |   Item 4
Item 2   |   Item 5
Item 3   |   Item 6

Я ищу, чтобы получитьчтобы закрыть столбец цифрой 4, а затем начать следующий столбец.
Я надеюсь найти решение только для CSS.

Answer 1

Итак, я наткнулся на самый простой ответ только для CSS почти сразу после публикации вопроса, поэтому я собираюсь поделиться им со всеми:

У UL должна быть фиксированная ВЫСОТА, ПЛЮСПравило CSS column-fill: auto.Убедившись в том, что LI имеют фиксированную высоту (которую можно изменить), вы можете регулировать высоту LI до тех пор, пока обертка не произойдет там, где вам это нужно, хотите ли вы, чтобы обтекание происходило после четвертого li или любого другого li.

.active-list {
     padding-left: 0;
    column-count: 2;
    column-fill: auto;
    width: 500px;
    overflow: hidden;
    padding: 10px;
    background: #595757;
    height: 245px;
}

.item {
    width: 100%;
    height: 50px;
    perspective: 1000px;
    display: block;
    margin-bottom: 10px;
    background: red;
}

<ul class="active-list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li class="item">Item 4</li>
  <li class="item">Item 5</li>
  <li class="item">Item 6</li>
</ul>

Answer 2

Как насчет того, чтобы указать высоту контейнера, здесь ваш контейнер называется 'activeList', а ваш контейнер 'display: inline-flex' и flex wrap для переноса. демо

.activeList{
  display: inline-flex;
  flex-direction: column;
  height: 72px;
  flex-wrap: wrap;
}

.item{
    padding: 0 5px;
}

Answer 3

Я добился этого с помощью flex-wrap и nth child.Взгляните на коде, должно быть довольно понятно.Если нет, дайте мне знать!Приятно то, что это будет работать, если вам нужно больше, чем просто 2 столбца.

См. Демонстрацию и codepen :

.activeList{
  display: flex;
  flex-direction:column;
  flex-wrap: wrap;  
}

.item:nth-child(3n){
  page-break-after:always; 
  break-after: always;
}

<ul class="activeList">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
</ul>

Answer 4

Лучший и самый простой подход imo - это использовать flexbox.Вы должны разбить ваш список на 2 части: 1-я часть от элементов 1 до 4/2-я часть от элемента 5 до 6. Затем оберните их в гибкий контейнер дисплея.

Что бы это сделать, посмотрите на фрагмент:)

#container { /*The only CSS property you need*/
    display: flex;
}

<div id="container"> <!--flex container-->
    <ul class="activeList-1-4"> <!--first list-->
        <li class="item">
            Item 1
        </li>
        <li class="item">
            Item 2
        </li>
        <li class="item">
            Item 3
        </li>
        <li class="item">
            Item 4
        </li>
    </ul>
    <ul class="activeList-5-6"><!--second list-->
        <li class="item">
            Item 5
        </li>
        <li class="item">
            Item 6
        </li>
    </ul>
</div>