Come creare: disposizione di colonne miste
- Pagina precedente Vista griglia della lista
- Pagina successiva Schede di colonna
Impara a creare una griglia di disposizione di colonne miste utilizzando CSS.
Impara a creare una disposizione di colonne responsiva, che può variare tra quattro colonne, due colonne e colonne a piena larghezza in base alla larghezza dello schermo.
Modifica la dimensione della finestra del browser per vedere l'effetto responsivo:
Come creare una disposizione di colonne miste
Primo passo - Aggiungi HTML:
<div class="row"> <div class="column"></div> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
Secondo passo - Aggiungi CSS:
In questo esempio, creeremo una disposizione a quattro colonne, che si trasformerà in due colonne quando la larghezza dello schermo è inferiore a 900 pixel. Tuttavia, quando la larghezza dello schermo è inferiore a 600 pixel, le colonne si accorperanno piuttosto che essere in parallelo.
/* Crea quattro colonne uguali, in modo che flottino insieme */
.column {
floating: sinistro;
larghezza: 25%;
}
/* Pulisci il floating */
.row:after {
contenuto: "";
mostra: tavolo;
pulisci: entrambi;
}
/* Layout responsivo - cambia la disposizione da due colonne a quattro colonne */
@media screen and (larghezza massima: 900px) {
.column {
larghezza: 50%;
}
}
/* Layout responsivo - rende due colonne accorpate, piuttosto che in parallelo */
@media screen and (larghezza massima: 600px) {
.column {
larghezza: 100%;
}
}
Pagine correlate
Tutorial:Layout del sito web CSS
Tutorial:Progettazione web responsive CSS
- Pagina precedente Vista griglia della lista
- Pagina successiva Schede di colonna
