Comment puis-je aligner les divisions flottantes horizontalement dans un conteneur de taille fixe ?

Alignement des divs flottants horizontalement

Lorsque vous travaillez avec un div conteneur avec une taille fixe et un débordement caché, l'alignement horizontal des divs flottants peut être un défi. Par défaut, les divs flottants passeront à la ligne suivante lorsqu'ils atteignent la limite droite de leur parent, même s'il y a de l'espace disponible au-dessus.

Apparence souhaitée

L'apparence souhaitée est une rangée horizontale de divs dans le conteneur, les empêchant de s'enrouler sur plusieurs lignes. Éléments en ligne avec espace blanc : le no-wrap peut y parvenir, mais il ne convient pas aux éléments flottants au niveau du bloc.

Solution

Pour résoudre ce problème, vous pouvez introduire un div interne dans le conteneur qui a une largeur suffisante pour accueillir tous les divs flottants. En définissant la propriété de débordement sur cachée à la fois sur le conteneur et sur le div interne, vous pouvez empêcher les divs de déborder hors de la zone désignée.

Exemple de code

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

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

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

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!