Comment maintenir la hauteur du conteneur avec « display : inline-block » et « position : absolue » en CSS ?

CSS : display:inline-block et positionnement:absolute

Cette question explore le comportement des éléments CSS lors de l'utilisation des deux display:inline- bloc et positionnement : absolu. Le code HTML suivant est fourni :

<code class="html"><div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-a">some text</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-a">some more text to force line wrapping</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some text</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some more text to force line wrapping</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some more text to force line wrapping</span>
</div></code>

Avec le CSS suivant :

<code class="css">.section {
  display: block;
  width: 200px;
  border: 1px dashed blue;
  margin-bottom: 10px;
}
.element-left,
.element-right-a,
.element-right-b {
  display: inline-block;
  background-color: #ccc;
  vertical-align: top;
}
.element-right-a,
.element-right-b {
  max-width: 100px;
}
.element-right-b {
  position: absolute;
  left: 100px;
}</code>

Le problème soulevé est que le Un élément avec un positionnement absolu fait perdre sa hauteur à sa boîte contenante. La question cherche une solution à ce problème tout en conservant un positionnement absolu dans la zone .section.

Comprendre le problème

Lors de l'utilisation de position:absolute;, la position de l'élément est supprimée du flux normal de la page . En tant que tel, il n’affecte plus la disposition de son élément conteneur, y compris sa hauteur. Par conséquent, l'élément conteneur, dans ce cas la boîte .section, perd la trace de sa hauteur et prend une hauteur nulle, sauf indication contraire.

De plus, display:inline-block; ne s'applique pas aux éléments positionnés de manière absolue car le positionnement absolu remplace ce mode d'affichage, le définissant effectivement sur display:block.

Résoudre le problème de hauteur

Pour résoudre le problème de hauteur, il faut définir explicitement le hauteur de la boîte .section. Cependant, compte tenu de la disposition souhaitée, l'utilisation du positionnement absolu n'est peut-être pas l'approche la plus appropriée.

Solution alternative

La disposition souhaitée, avec la deuxième colonne alignée sur une position fixe dans chaque bloc, peut être obtenu sans utiliser de positionnement absolu. Voici une solution alternative :

<code class="html"><div class="section">
  <span class="element-left"><span class="indent-0">some text</span></span>
  <span class="element-right">some text</span>
</div>

<div class="section">
  <span class="element-left"><span class="indent-1">some text</span></span>
  <span class="element-right">some text</span>
</div>

<div class="section">
  <span class="element-left"><span class="indent-2">some text</span></span>
  <span class="element-right">some text</span>
</div></code>

<code class="css">.section span {
  display: inline-block;
}
.element-left {
  width: 200px;
}
.indent-1 {
  padding: 10px;
}
.indent-2 {
  padding: 20px;
}
.element-right {
  width: 150px;
}</code>

En ajoutant un balisage supplémentaire pour représenter le niveau d'indentation et en utilisant des techniques de positionnement relatif avec remplissage, nous pouvons facilement obtenir la mise en page souhaitée.

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!