Comment créer des divisions flottantes de même hauteur avec du CSS pur ?

Création de divs flottants de même hauteur en HTML/CSS

Lorsque vous travaillez avec des divs flottants, il peut parfois être difficile de maintenir des hauteurs égales entre divisions. Même si un tableau peut constituer une solution simple, il n’est pas toujours sémantiquement approprié. Heureusement, il existe des techniques CSS pures pour y parvenir.

Une approche consiste à appliquer un remplissage inférieur et une marge inférieure négative aux divs. Le remplissage crée l'apparence d'un espace vertical, tandis que la marge contrecarre ce remplissage. Cela peut être exploité pour créer des colonnes de même hauteur.

De plus, envelopper les divs dans un conteneur parent avec overflow: Hidden peut empêcher le contenu de déborder en dehors du conteneur. Cela permet de maintenir l'alignement vertical.

Pour centrer verticalement le texte dans les divs, envisagez d'utiliser des techniques de hauteur de ligne ou de flexbox. Par exemple, définir la hauteur de ligne sur une valeur élevée ou utiliser flexbox et aligner les éléments au centre peut aider à obtenir un alignement vertical.

L'exemple de code ci-dessous illustre cette technique :

#container {
  overflow: hidden;
}
#left-col {
  float: left;
  width: 50%;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px;
  border-left: 1px solid black;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

Ceci Cette approche fournit un moyen propre et sémantiquement approprié de créer des div flottants de même hauteur en HTML/CSS.

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!