Задать вопрос
@Ntari

Как сделать чтобы элементы разбивались на два столбца?

Допустим я добавляю какие-то элементы, типа:

<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>


А на выходе получаю их в два столбца:

item1 item3
item2 item4

Причем столбцов всегда два. И каждый занимает 50% контейнера. Если элементов нечетное количество то пусть в первом будет на один больше. Подскажите как такое сверстать?
  • Вопрос задан
  • 88 просмотров
Подписаться 2 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
origami1024
@origami1024
went out for a night walk
Способ 1. Flex контейнер со свойством flex-wrap: flex, и дивами width:50%.
Если у элементов будут границы или паддинги, то используй box-sizing: border-box, либо width рассчитывается поменьше.
https://jsfiddle.net/byvo7524/1/

Способ 2. Свойство CSS column-count: 2 для родителя дивов.
<div class="wrapper">
  <div>item1</div>
  <div>item2</div>
  <div>item3</div>
  <div>item4</div>
</div>

.wrapper {
  column-count: 2; 
}

https://jsfiddle.net/7L0b6vxq/

У первого варианта лучше поддержка браузерами.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы