Как сделать - одинаковая высота
Узнайте, как создать столбцы одинаковой высоты с помощью CSS.
Как создать столбцы одинаковой высоты
Когда у вас есть столбцы, которые должны отображаться рядом, вам часто нужно, чтобы они были одинаковой высоты (соответствуя высоте самого высокого).
Проблема:
Желание:
Шаг 1) Добавьте HTML:
Пример
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
Шаг 2) Добавьте CSS:
Пример
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
Отзывчивая равная высота
Столбцы, которые мы сделали в предыдущем примере, являются адаптивными (если вы измените размер окна браузера в пробном примере, вы увидите, что они автоматически подстраиваются под необходимую ширину и высоту). Однако для небольших экранов (например, смартфонов) вы можете захотеть, чтобы они располагались вертикально, а не горизонтально:
На средних и больших экранах:
Привет мир.
Привет мир.
Привет мир.
Привет мир.
Привет мир.
На маленьких экранах:
Привет мир.
Привет мир.
Привет мир.
Привет мир.
Привет мир.
Для этого добавьте медиа-запрос и укажите значение пикселя точки останова, когда это должно произойти:
Пример
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
Равная высота и ширина с использованием Flexbox
Вы также можете использовать Flexbox для создания блоков одинаковой высоты:
Пример
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Примечание. Flexbox не поддерживается в Internet Explorer 10 и более ранних версиях.
Совет: Узнайте больше о гибких блоках в нашем учебнике по CSS Flexbox Tutorial .