Come fare per - Altezza uguale
Scopri come creare colonne di uguale altezza con CSS.
Come creare colonne di uguale altezza
Quando hai colonne che dovrebbero apparire una accanto all'altra, spesso vorrai che abbiano la stessa altezza (corrispondente all'altezza del più alto).
Il problema:
Il desiderio:
Passaggio 1) Aggiungi HTML:
Esempio
<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>
Passaggio 2) Aggiungi CSS:
Esempio
.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 */
}
Altezza uguale reattiva
Le colonne che abbiamo creato nell'esempio precedente sono reattive (se ridimensioni la finestra del browser nell'esempio di prova, vedrai che si adattano automaticamente alla larghezza e all'altezza necessarie). Tuttavia, per schermi piccoli (come gli smartphone), potresti volerli impilare verticalmente anziché orizzontalmente:
Su schermi medi e grandi:
Ciao mondo.
Ciao mondo.
Ciao mondo.
Ciao mondo.
Ciao mondo.
Su piccoli schermi:
Ciao mondo.
Ciao mondo.
Ciao mondo.
Ciao mondo.
Ciao mondo.
Per ottenere ciò, aggiungi una query multimediale e specifica un valore di pixel di punto di interruzione per quando ciò dovrebbe accadere:
Esempio
/* 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%;
}
}
Uguale altezza e larghezza utilizzando Flexbox
Puoi anche utilizzare Flexbox per creare scatole di uguale altezza:
Esempio
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Nota: Flexbox non è supportato in Internet Explorer 10 e versioni precedenti.
Suggerimento: leggi di più sulle scatole flessibili nel nostro tutorial CSS Flexbox .