четыре элемента, распределяющих удушье в 3-х колоночном контейнере - css-колонны - PullRequest
Новая
       41

четыре элемента, распределяющих удушье в 3-х колоночном контейнере - css-колонны

0 голосов
/ 12 октября 2018

У меня интересная проблема.Когда у меня есть следующий код (фрагмент)

, я вижу это:

2x2

Я хотел бы видеть:

Something like this

Кажется, что это происходит только тогда, когда у меня есть четыре элемента, три элемента занимают три столбца и 5 также заполняют все три столбца.

Возможно ли это с помощью CSS-столбцов?Есть ли надежда, или это то, что колонки CSS всегда будут делать?

Я бы рассмотрел flexbox или float, но есть требование, чтобы элементы выглядели в порядке, как показано: 

1 4 7
2 5 8
3 6 9


ul {
    column-count: 3;
    column-gap: 30px;
}
li {
    background: lightblue 
}
<ul>
<li>Something 1</li>
<li>Something 2</li>
<li>Something 3</li>
<li>Something 4</li>
</ul>

1 Ответ

0 голосов
/ 12 октября 2018

Попробуйте: 

ul {
   display: flex;
   flex-wrap: wrap;
}

ul > * {
    flex-basis:33.3%; /*this will create 3 columns*/
}

Затем примените встроенный CSS для каждого дочернего элемента, установив его свойство order.Если у вас есть n элементов, подайте заявку на первое n / 3 из них: 

order:<indexZeroBased*3+1>

Для следующего n / 3 примените: 

order:<indexZeroBased*3+2>

А для остальных: 

order:<indexZeroBased*3+3>
...