Как сделать - столбцы с одинаковой высотой
Узнайте, как создать столбцы с одинаковой высотой с помощью CSS.
Создание столбцов с одинаковой высотой
Когда у вас есть столбцы, которые должны появляться бок о бок, вы часто хотите, чтобы они были одинаковой высоты (соответствует высоте высокий).
The Problem:
The Desire:
Шаг 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 */
}
Отзывчивая равная высота
Столбцы, которые мы сделали в предыдущем примере, являются отзывчивыми (если вы изменяете размер окна браузера в примере пример, то увидите, что они автоматически корректируются на нужную ширину и высоту). Однако, для небольших экранов (например, смартфонов), вы можете хотеть, чтобы они стек вертикально, а не горизонтально:
On medium and large screens:
Hello World.
Hello World.
Hello World.
Hello World.
Hello World.
On small screens:
Hello World.
Hello World.
Hello World.
Hello World.
Hello World.
Чтобы добиться этого, добавьте медиа-запрос и укажите значение пиксела точки останова, когда это должно произойти:
Пример
/* 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 учебнике.