Comment aligner verticalement des éléments flottants de hauteurs variables sans modifier leur dimensionnement intrinsèque ?

Comment aligner verticalement des éléments flottants de hauteurs variables

Dans un conteneur aligné horizontalement, les flotteurs ont tendance à s'aligner vers le haut par défaut. Lorsqu’il s’agit d’éléments de hauteurs inconnues et variables, cet alignement peut conduire à des résultats incohérents et indésirables. Le but est de trouver une méthode pour centrer verticalement ces éléments flottants sans modifier leur dimensionnement intrinsèque.

Restrictions des flotteurs

Les flotteurs sont restreints dans leur alignement vertical à cause du navigateur caractéristiques. La règle n°8 du comportement des flotteurs CSS stipule que les flotteurs doivent être placés aussi haut que possible. Cela signifie qu'un alignement vertical direct des flotteurs ne peut pas être obtenu.

Utilisation de wrappers de blocs en ligne

Pour contourner cette restriction, nous pouvons utiliser des éléments de blocs en ligne pour envelopper nos éléments flottants. Les éléments de bloc en ligne établissent un contexte de formatage de bloc (BFC), leur permettant de contenir des flottants. En donnant à ces wrappers des propriétés d'alignement vertical, nous pouvons contrôler le positionnement de nos éléments float.

Implémentation

1. Entourez chaque élément float dans un bloc en ligne wrapper.
2. Définissez la propriété d'affichage de ces wrappers sur inline-block.
3. Spécifiez un propriété vertical-align pour que les emballages les alignent verticalement.
4. Assurez-vous que le conteneur extérieur a une hauteur suffisante pour accueillir les éléments flottants alignés verticalement.

Exemple

<code class="css">.float-left {
  float: left;
}

.float-right {
  float: right;
}

#main {
  border: 1px solid blue;
  margin: 0 auto;
  width: 500px;
}

#main > div {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}</code>

<code class="html"><div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div>
  <div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div></code>

Cette approche centre efficacement verticalement les éléments flottants de différentes hauteurs sans s'appuyer sur la propriété d'affichage du division externe. Cependant, il est important de noter qu'un espace peut apparaître entre les wrappers de blocs en ligne.

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!