Wie kann man schwebende Elemente variabler Höhe vertikal ausrichten, ohne ihre eigentliche Größe zu ändern?

So richten Sie schwebende Elemente variabler Höhe vertikal aus

In einem horizontal ausgerichteten Container richten sich schwebende Elemente standardmäßig nach oben aus. Beim Umgang mit Elementen unbekannter und unterschiedlicher Höhe kann diese Ausrichtung zu inkonsistenten und unerwünschten Ergebnissen führen. Das Ziel besteht darin, eine Methode zum vertikalen Zentrieren dieser Float-Elemente zu finden, ohne ihre intrinsische Größe zu ändern.

Einschränkungen von Floats

Floats sind aufgrund des Browsers in ihrer vertikalen Ausrichtung eingeschränkt Spezifikationen. Regel Nr. 8 des CSS-Float-Verhaltens schreibt vor, dass Floats so hoch wie möglich platziert werden müssen. Dies bedeutet, dass eine direkte vertikale Ausrichtung von Floats nicht erreicht werden kann.

Verwendung von Inline-Block-Wrappern

Um diese Einschränkung zu umgehen, können wir Inline-Block-Elemente verwenden, um unsere zu umschließen Float-Elemente. Inline-Blockelemente stellen einen Blockformatierungskontext (BFC) her, der es ihnen ermöglicht, Gleitkommazahlen zu enthalten. Indem wir diesen Wrappern Vertical-Align-Eigenschaften zuweisen, können wir die Positionierung unserer Float-Elemente steuern.

Implementierung

1. Schließen Sie jedes Float-Element in einen Inline-Block ein Wrapper.
2. Setzen Sie die Anzeigeeigenschaft dieser Wrapper auf inline-block.
3. Geben Sie eine Vertical-Align-Eigenschaft für die Wrapper an, um sie vertikal auszurichten.
4. Stellen Sie sicher, dass die äußere Der Container hat eine ausreichende Höhe, um die vertikal ausgerichteten Float-Elemente aufzunehmen.

Beispiel

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

Dieser Ansatz zentriert Float-Elemente unterschiedlicher Größe effektiv vertikal Höhen, ohne sich auf die Anzeigeeigenschaft des äußeren Div zu verlassen. Es ist jedoch wichtig zu beachten, dass zwischen den Inline-Block-Wrappern möglicherweise etwas Platz vorhanden ist.

Das obige ist der detaillierte Inhalt vonWie kann man schwebende Elemente variabler Höhe vertikal ausrichten, ohne ihre eigentliche Größe zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!