Wie kann man Kinder verschiedener Eltern in CSS ohne JavaScript auf die gleiche Größe ausrichten?

CSS: Untergeordnete Elemente verschiedener Eltern auf die gleiche Höhe ausrichten

Bei der Arbeit mit CSS ist es möglich, untergeordnete Elemente verschiedener Elemente an der gleichen Höhe auszurichten gleiche Höhe ohne Verwendung von JavaScript. Dies kann mithilfe von Flexbox erreicht werden, mit dem Sie das Layout und die Ausrichtung von Elementen innerhalb eines Containers steuern können.

Um diese Ausrichtung zu erreichen, befolgen Sie diese Schritte:

1. Machen der Container eine Flexbox: Set display: flex auf dem Container, der die untergeordneten Elemente enthält.
2. Wickeln Sie die untergeordneten Elemente in eine Flexbox: Set display: flex auf dem Element, das die untergeordneten Elemente enthält , oder auf die Kinder selbst.
3. Legen Sie die Flexrichtung fest:Verwenden Sie die Spalte „flex-direction:“, um die Kinder vertikal fließen zu lassen.
4. Höhe ausgleichen:Setzen Sie align-self: stretch auf jedes untergeordnete Element, um sie in der Höhe gleich zu machen.

Im bereitgestellten Codebeispiel:

<code class="css">.container {
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
}

.content > * {
  align-self: stretch;
}</code>

Dieser Ansatz erfüllt die Anforderung von have Kinder über verschiedene Spalten mit derselben Höhe hinweg unter Berücksichtigung der mobilen Optimierung von Bootstrap. Die Medienabfrage kann angepasst werden, um je nach Bedarf verschiedene Haltepunkte zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonWie kann man Kinder verschiedener Eltern in CSS ohne JavaScript auf die gleiche Größe ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!