Comment obtenir un alignement horizontal des divisions en CSS ?

Alignement horizontal des divs en CSS

Lorsque vous travaillez avec CSS, l'alignement horizontal des divs dans un conteneur peut présenter un défi. Par défaut, les div flottants s'empileront verticalement si leur largeur combinée dépasse la largeur du conteneur parent, même si la hauteur du conteneur permet une disposition horizontale.

Pour obtenir l'alignement horizontal souhaité, nous pouvons utiliser un div interne dans le conteneur qui est suffisamment large pour accueillir tous les divs flottants.

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div>

Dans cette solution, le div #inner a une largeur supérieure à la largeur combinée des divs #enfants flottants. Par conséquent, tous les div flottants s’alignent horizontalement dans le div #container, ce qui donne la disposition souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!