Comment créer deux divisions flottantes de même hauteur avec une ligne de séparation en CSS ?

Créer des divs flottants de même hauteur avec CSS

Problème : Créer deux divs flottants qui partagent la même hauteur et ont une ligne de séparation entre eux, sans utiliser de tableaux pour la sémantique raisons.

Solution :Pour y parvenir, vous pouvez utiliser la technique CSS suivante :

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

Explication :

• Envelopper les divs dans un conteneur avec débordement : caché force le saut de ligne provoqué par les divs flottants à être dans le conteneur.
• L'application d'un grand rembourrage inférieur et d'une marge négative de quantité égale aux divs garantit qu'ils se dilatent pour occuper 100 % de la hauteur tout en gardant leur contenu centré verticalement.
• La ligne de séparation les divs sont créés en utilisant une petite marge ou bordure appliquée à l'un d'entre eux.

En utilisant cette technique CSS, vous pouvez créer deux divs flottants de même hauteur sans les implications sémantiques de l'utilisation d'une table.

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!