Come allineare le immagini in parallelo

Impara come allineare le immagini in parallelo utilizzando CSS.

Come disporre immagini in modo affiancato

Primo passo - Aggiungi HTML:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Secondo passo - Aggiungi CSS:

Come utilizzare CSS float Proprietà per creare immagini affiancate:

Esempio di floating

/* Tre contenitori di immagini (quattro contenitori di immagini utilizzano 25%, due contenitori di immagini utilizzano 50%, ecc.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Eliminare il floating dopo il contenitore delle immagini */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Prova da solo

Come utilizzare CSS flex Proprietà per creare immagini affiancate:

Esempio di flexbox

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

Prova da solo

Attenzione:Il Flexbox non è supportato da Internet Explorer 10 e versioni precedenti. La scelta di utilizzare float o flex per creare una layout a tre colonne dipende da te. Tuttavia, se devi supportare IE10 e versioni precedenti, dovresti utilizzare il float.

Suggerimento:Per ulteriori informazioni sul modulo di layout flexibile, leggi il nostro Tutorial di CSS Flexbox.

Aggiungi la capacità di risposta

O puoi aggiungere una media query per far sì che le immagini si appoggino su uno schermo di una larghezza specifica anziché essere disposte in modo parallelo.

Esempio seguente vedrà le immagini appoggiate verticalmente su schermi con larghezza di 500px o inferiore:

Esempio responsive

/* Layout responsive - far sì che le tre colonne si sovrappongano invece di essere disposte in modo parallelo */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Prova da solo

Per ulteriori informazioni sulle media query, leggi il nostro Tutorial di CSS Media Query.

Pagine correlate

Tutorial:CSS immagine

Tutorial:CSS Flottante

Tutorial:CSS galleria di immagini