Здесь вы узнаете, как сделать 3-х колоночный макет сетки при помощи CSS.
Колонка 1
Некоторый текст..
Колонка 2
Некоторый текст..
Колонка 3
Некоторый текст..
Как сделать макет в 3 колонки
Шаг 1) Добавляем HTML:
Пример
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
Шаг 2) Добавляем CSS:
Здесь мы создаем три одинаковые колонки:
Пример
.column {
float: left;
width: 33.33%;
}
/* Сбрасываем обтекание после колонок */
.row:after {
content: "";
display: table;
clear: both;
}
Здесь мы создаем три колонки разной ширины:
Пример
.column {
float: left;
}
.left, .right {
width: 25%;
}
.middle {
width: 50%;
}
Здесь мы добавляем колонкам адаптивность:
Пример
/* Адаптивный макет – когда ширина экрана меньше 600px, колонки
будут отображаться друг над другом, а не рядом друг с другом */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
