Количество колонок
233
27 августа 2017, 03:56
Есть ли возможность с помощью css сделать, чтобы css-свойство columns создавало 3 колонки только в том случае, если количество li превышает 3 ?
а если число li меньше 3х, тогда li должен быть выровнен вертикально
https://jsfiddle.net/LkLhzwch/
ul{
columns: 3;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
</ul>или как это реализовать, пусть с помощью других css-свойств?
Answer 1
Можете добиться такого результата с помощью flex:
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
}
li {
box-sizing: border-box;
padding: 10px;
border: 1px solid red;
flex: 1 3 33%;
}
ul li:nth-last-child(1),
ul li:nth-last-child(2) {
flex: 1 1 100%;
}
ul li+li+li:nth-last-child(1),
ul li+li:nth-last-child(2) {
flex: 1 3 33% !important;
}<ul>
<li>6</li>
<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
<ul>
<li>2</li>
<li>1</li>
</ul>
-
12:17
Как меняется крипторынок и к чему готовиться владельцам криптообменников
-
14:31
-
13:07
-
16:04
-
14:16
-
23:12
-
21:33
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 48029 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30576 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23993 visits
- Как через css изменить цвет png изображения? 10422 visits
- Blob video url download 10015 visits
- Php curl запрос через прокси с авторизацией 9291 visits
- Работа с captcha vk api 8156 visits
© "hostciti.net" 12.4.2025 | 21:52