Wie erstelle ich mithilfe von CSS ein flüssiges Layout mit gleichmäßig verteilten DIVs?

Flüssige Breite mit gleichmäßig verteilten DIVs

Um ein flüssiges Layout mit gleichmäßig verteilten DIVs zu erreichen, kann der folgende Ansatz verwendet werden:

CSS

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

Dies legt den Text fest Ausrichtung auf „ausrichten“, wodurch der Inhalt gleichmäßig über die verfügbare Breite verteilt wird.

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  vertical-align: top;
}

Durch die Einstellung display: inline-block verhalten sich die DIVs wie Inline-Elemente und fließen horizontal innerhalb des Containers.

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

Ein „Stretch“-Element wird hinzugefügt, um den verbleibenden Platz zu füllen und die DIVs an ihre gewünschten Positionen zu schieben. Das Löschen der Schriftart und Zeilenhöhe hilft in einigen Browsern.

HTML

<div>

Das Stretch-Element sorgt dafür, dass die DIVs gleichmäßig und reaktionsschnell über den Flüssigkeitsbehälter verteilt werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von CSS ein flüssiges Layout mit gleichmäßig verteilten DIVs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!