Comment faire en sorte que deux divisions flottantes aient la même hauteur avec CSS ?

Divers flottants de même hauteur à l'aide de CSS

Vous souhaitez obtenir deux divs flottants partageant la même hauteur et ayant une ligne les séparant. Les tableaux offrent une solution pratique, mais pour des raisons sémantiques, vous recherchez une alternative CSS.

La clé des colonnes de hauteur égale réside dans l'utilisation d'un remplissage inférieur étendu et d'une marge inférieure négative. De plus, les colonnes doivent être entourées d'un div avec un débordement masqué.

Pour l'alignement vertical du texte, considérez l'extrait CSS suivant :

#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;
}

Avec ce CSS, vous pouvez aligner les hauteurs sans effort de divs flottants et créez une mise en page visuellement attrayante.

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!