Comment aligner horizontalement les éléments Div avec le contrôle de débordement ?

Alignement horizontal des éléments Div avec contrôle de débordement

Dans le domaine de la mise en page CSS, la gestion du placement des éléments peut présenter des défis uniques. Un problème courant survient lorsque l'on tente d'aligner des div horizontalement dans un conteneur avec une largeur et une hauteur fixes tout en empêchant le débordement.

Pour comprendre la cause première de ce problème, considérons le scénario suivant : vous disposez d'un div de conteneur avec un largeur et hauteur spécifiées auxquelles overflow:hidden est appliqué. Dans ce conteneur, vous souhaitez créer une rangée horizontale d’éléments float: left div. Lorsque les div flottent vers la gauche, ils descendent naturellement vers la « ligne » suivante lorsqu’ils atteignent la limite droite de leur conteneur parent. Cela se produit malgré le fait qu'il y ait potentiellement suffisamment d'espace vertical disponible dans le parent, ce qui entraîne une disposition indésirable.

Relever le défi

Pour obtenir l'alignement horizontal souhaité sans débordement, vous pouvez utiliser une technique intelligente qui implique l’introduction d’un div interne supplémentaire dans le conteneur. Ce div interne doit avoir une largeur suffisamment grande pour accueillir tous les divs enfants flottants. Dans l'extrait de code CSS et HTML suivant, cette technique est démontrée :

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

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

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

<div>

En utilisant cette technique, vous créez efficacement un conteneur virtuel avec une plus grande largeur, permettant aux divs enfants de flotter vers la gauche indéfiniment. dans les limites horizontales du conteneur parent. La propriété overflow: Hidden garantit que le div interne est masqué, cachant ainsi tout élément div excédentaire.

Cette solution résout efficacement le problème du passage prématuré des divs à la ligne suivante, ce qui entraîne une ligne horizontale parfaitement alignée à l'intérieur. le conteneur spécifié.

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!