Wie erstelle ich mit CSS mithilfe eines Dummy-Elements ein flüssiges quadratisches Layout?

Erstellen eines fließenden Layouts mit Höhe gleich Breite

In CSS ist es möglich, die Höhe eines Elements dynamisch so festzulegen, dass sie mit seiner Höhe übereinstimmt Breite, wodurch ein quadratisches Seitenverhältnis entsteht. Um dies zu erreichen, verwenden wir eine clevere Technik, die als „Dummy-Element“-Methode bekannt ist.

Schritte:

1. Definieren Sie ein Container-Div-Element mit display: inline -Block und Position: relativ.
2. Erstellen Sie ein „Dummy“-Element innerhalb des Containers mit einem oberen Rand von 75 %. Dadurch entsteht ein Seitenverhältnis von 4:3.
3. Positionieren Sie ein absolutes Element innerhalb des Containers (#element), das die Höhe und Breite des Containers ausfüllt Container.

Beispiel:

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}

<div>

Ergebnis:

Diese Technik erstellt effektiv einen Fließendes Layout, bei dem sich die Höhe des #element-Divs dynamisch an die angegebene Breite des #container-Divs anpasst. Wenn Sie die Größe des Containers ändern, behält das Element seine quadratischen Proportionen bei.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS mithilfe eines Dummy-Elements ein flüssiges quadratisches Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!