Wie behalte ich die Containerhöhe mit „display: inline-block“ und „position: absolute“ in CSS bei?

CSS: display:inline-block und positionierung:absolute

Diese Frage untersucht das Verhalten von CSS-Elementen bei Verwendung von display:inline- Block und Positionierung: absolut. Der folgende HTML-Code wird bereitgestellt:

<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>

Mit dem folgenden CSS:

<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>

Das aufgeworfene Problem besteht darin, dass das Element mit absoluter Positionierung führt dazu, dass sein enthaltender Kasten seine Höhe verliert. Die Frage sucht nach einer Lösung für dieses Problem unter Beibehaltung der absoluten Positionierung innerhalb des .section-Felds.

Verstehen des Problems

Bei Verwendung von position:absolute; wird die Position des Elements aus dem normalen Seitenfluss entfernt . Daher hat es keinen Einfluss mehr auf das Layout des enthaltenden Elements, einschließlich seiner Höhe. Daher verliert das Containerelement, in diesem Fall die .section-Box, den Überblick über seine Höhe und nimmt eine Höhe von Null an, sofern nicht anders angegeben.

Zusätzlich: display:inline-block; ist nicht auf absolut positionierte Elemente anwendbar, da die absolute Positionierung diesen Anzeigemodus außer Kraft setzt und ihn effektiv auf display:block setzt.

Das Höhenproblem lösen

Um das Höhenproblem zu lösen, muss man explizit festlegen Höhe des .Abschnittskastens. In Anbetracht des gewünschten Layouts ist die Verwendung der absoluten Positionierung jedoch möglicherweise nicht der geeignetste Ansatz.

Alternative Lösung

Das gewünschte Layout, bei dem die zweite Spalte an einer festen Position innerhalb jedes Blocks ausgerichtet ist, kann ohne absolute Positionierung erreicht werden. Hier ist eine alternative Lösung:

<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>

Durch das Hinzufügen zusätzlicher Markierungen zur Darstellung der Einrückungsebene und die Verwendung relativer Positionierungstechniken mit Auffüllung können wir leicht das gewünschte Layout erreichen.

Das obige ist der detaillierte Inhalt vonWie behalte ich die Containerhöhe mit „display: inline-block“ und „position: absolute“ in CSS bei?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!