Jak TO - Równa wysokość
Dowiedz się, jak tworzyć kolumny o równej wysokości za pomocą CSS.
Jak tworzyć kolumny o równej wysokości
Kiedy masz kolumny, które powinny pojawiać się obok siebie, często chcesz, aby miały równą wysokość (dopasowującą się do wysokości najwyższego).
Problem:
Pragnienie:
Krok 1) Dodaj kod HTML:
Przykład
<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>
Krok 2) Dodaj CSS:
Przykład
.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 */
}
Responsywna Równa Wysokość
Kolumny, które stworzyliśmy w poprzednim przykładzie, są responsywne (jeśli zmienisz rozmiar okna przeglądarki w przykładzie try it, zobaczysz, że automatycznie dostosowują się do wymaganej szerokości i wysokości). Jednak w przypadku małych ekranów (takich jak smartfony) możesz chcieć, aby układały się w stos w pionie zamiast w poziomie:
Na średnich i dużych ekranach:
Witaj świecie.
Witaj świecie.
Witaj świecie.
Witaj świecie.
Witaj świecie.
Na małych ekranach:
Witaj świecie.
Witaj świecie.
Witaj świecie.
Witaj świecie.
Witaj świecie.
Aby to osiągnąć, dodaj zapytanie o media i określ wartość piksela punktu przerwania, kiedy ma to nastąpić:
Przykład
/* 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%;
}
}
Równa wysokość i szerokość przy użyciu Flexbox
Możesz również użyć Flexbox do tworzenia pudełek o równej wysokości:
Przykład
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Uwaga: Flexbox nie jest obsługiwany w przeglądarce Internet Explorer 10 i wcześniejszych wersjach.
Wskazówka: Przeczytaj więcej o elastycznych pudełkach w naszym samouczku CSS Flexbox .