Чтобы создать две колонки в 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;
у второй, которые выравнивают их влево и вправо соответственно.