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