Comment puis-je rendre les divisions flottantes de même hauteur en utilisant uniquement CSS ?

Correction des écarts de hauteur des div flottants dans HTML/CSS

Dans le domaine du développement Web, un défi courant se pose lorsque l'on travaille avec des divs flottants : en s'assurant qu'ils s'alignent de la même hauteur. Cette énigme a souvent été résolue à l'aide de tableaux HTML, mais les préoccupations concernant l'exactitude sémantique persistent.

La solution privilégiée réside dans la puissance du CSS. En implémentant une combinaison spécifique de styles, nous pouvons obtenir des divs flottants de même hauteur :

1. Overflow Hidden : enveloppez les divs dans un div parent avec overflow : caché. Cela confine les divs dans une zone désignée, les empêchant de s'étendre au-delà de leurs limites.
2. Rembourrage inférieur et marge négative : appliquez un rembourrage inférieur généreux, tel que 500 em, aux divs. Cela crée un grand espace virtuel sous les divs.
3. Marge inférieure négative : Ajoutez une marge négative égale à la valeur de remplissage. Cela déplace les divs vers le haut, compensant essentiellement le remplissage.

L'extrait CSS suivant illustre cette approche :

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

En employant cette technique, nous pouvons garantir que les divs flottants s'ajustent automatiquement leurs hauteurs pour correspondre au contenu le plus élevé, créant une cohérence visuelle agréable.

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!