Comment aligner des images côte à côte

Apprendre à aligner côte à côte des images en utilisant CSS.

Comment aligner des images en série

Première étape - Ajouter 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>

Deuxième étape - Ajouter CSS :

Comment utiliser CSS flot Propriétés pour créer des images alignées en série :

Exemple de flot

/* Trois conteneurs d'images (quatre conteneurs d'images utilisent 25%, deux conteneurs d'images utilisent 50%, etc.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Nettoyer le flot après le conteneur d'image */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Essayez-le vous-même

Comment utiliser CSS flex Propriétés pour créer des images alignées en série :

Exemple de boîte flexible

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

Essayez-le vous-même

Remarque :Flexbox n'est pas pris en charge par Internet Explorer 10 et versions antérieures. L'utilisation de float ou flex pour créer un布局 en trois colonnes dépend de vous. Cependant, si vous devez prendre en charge IE10 et versions antérieures, vous devriez utiliser la flottaison.

Astuce :Pour en savoir plus sur le module de mise en page flexible, veuillez lire notre Tutoriel CSS Flexbox.

Ajouter la capacité de réponse

Ou, vous pouvez ajouter une requête médiatique pour empiler les images à une largeur d'écran spécifique plutôt que de les aligner côte à côte.

L'exemple suivant empile les images verticalement sur des écrans de largeur 500px ou inférieure :

Exemple de mise en page responsive

/* Mise en page responsive - empile les trois colonnes plutôt que de les aligner côte à côte */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Essayez-le vous-même

Pour en savoir plus sur les requêtes médiatiques, veuillez lire notre Tutoriel CSS pour les requêtes médiatiques.

Pages associées

Tutoriel :Image CSS

Tutoriel :Flottaison CSS

Tutoriel :Bibliothèque d'images CSS