Как сделать - Равную высоту столбцов
Узнать, как создать столбцы равной высоты с помощью CSS.
Создать равную высоту столбцов
Когда у вас есть столбцы, которые должны появляться рядом, вы часто хотите, чтобы они были одинаковой высоты (совпадающей с высотой самого высокого).
Проблема:
Желание:
Шаг 1) Добавить HTML:
Пример
<div class="col-container">
<div class="col">
<h2>Колонка 1</h2>
<p>Привет мир</p>
</div>
<div class="col">
<h2>Колонка 2</h2>
<p>Привет мир!</p>
<p>Привет мир!</p>
<p>Привет мир!</p>
<p>Привет мир!</p>
</div>
<div class="col">
<h2>Колонка 3</h2>
<p>Какой-то другой текст..</p>
<p>Какой-то другой текст..</p>
</div>
</div>Шаг 2) Добавить CSS:
Пример
.col-container {
display: table; /* Сделайте элемент контейнера похожим на таблицу */
width: 100%; /* Установите полную ширину, чтобы развернуть всю страницу */
}
.col {
display: table-cell; /* Чтобы элементы внутри контейнера вели себя как ячейки таблицы */
}Редактор кода »Отзывчивый равные столбцы
Столбцы, которые мы сделали в предыдущем примере, являются адаптивными (если вы измените размер окна браузера в примере, вы увидите, что они автоматически настраиваются на необходимую ширину и высоту). Однако для небольших экранов (например, смартфонов) вы можете захотеть, чтобы они складывались вертикально, а не горизонтально:
На средних и больших экранах:
Привет мир.
Привет мир.
Привет мир.
Привет мир.
Привет мир.
На маленьких экранах:
Привет мир.
Привет мир.
Привет мир.
Привет мир.
Привет мир.
Для этого добавьте медиа запрос и укажите значение пикселя точки останова, когда это должно произойти:
Пример
/* Если окно браузера меньше 600px, сделайте так, чтобы столбцы складывались друг на друга */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}Редактор кода »Равная высота и ширина с помощью Флексбокс
Вы также можете использовать Флексбокс для создания коробок одинаковой высоты:
Примечание: Флексбокс не поддерживается в Internet Explorer 10 и более ранних версиях.
Совет: Узнайте больше о гибких коробках в нашем CSS Флексбокс.
