Чтобы создать две колонки в CSS, можно использовать свойство display: flex;. Это свойство позволяет создавать гибкие контейнеры, которые могут изменять ширину и высоту в зависимости от размеров окон просмотра и других условий.
Вот пример CSS-кода для создания двух колонок с одинаковой шириной:
.wrapper {
display: flex;
}
.left-column, .right-column {
width: 50%;
box-sizing: border-box;
padding: 10px;
}
В этом примере .wrapper является контейнером для двух колонок .left-column и .right-column. Свойство display: flex; устанавливает контейнеру сгибаемую структуру, которая позволяет гибко распределять элементы.
width: 50%; устанавливает ширину каждой колонки в 50% ширины родительского элемента (.wrapper).
box-sizing: border-box; устанавливает вычисление ширины и высоты элемента, включающее границы и поля.
padding: 10px; добавляет 10 пикселей отступа у каждой колонки.
Также возможно использовать свойство float
.left-column {
float: left;
width: 50%;
box-sizing: border-box;
padding: 10px;
}
.right-column {
float: right;
width: 50%;
box-sizing: border-box;
padding: 10px;
}
Здесь .left-column и .right-column имеют ширину 50% ширины родительского элемента, как и в предыдущем примере. Также указаны свойства float: left; у первой колонки и float: right; у второй, которые выравнивают их влево и вправо соответственно.





