Wie erstelle ich einen Container mit fließender Breite und gleichmäßig verteilten DIVs?

Flüssigkeitsbreite mit gleichmäßig verteilten DIVs

Die Herausforderung besteht darin, einen Flüssigkeitsbreitenbehälter mit vier gleichmäßig verteilten DIVs zu erstellen. Die DIVs sollten horizontal ausgerichtet sein, wobei DIV 1 nach links schwebend, DIV 4 nach rechts schwebend und die DIVs 2 und 3 dazwischen positioniert sein sollten. Darüber hinaus sollte sich der Abstand dynamisch anpassen, wenn die Größe des Browsers geändert wird.

Lösung

Um dies zu erreichen, können wir die CSS-Eigenschaften text-align: justify und display verwenden: Inline-Block. Hier ist der Code:

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
}

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

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

Erklärung

• Das #container-Element ist auf text-align: justify eingestellt. Dadurch wird der Text gezwungen, sich zu erweitern, um die Containerbreite auszufüllen.
• Jedes .box-Element ist so eingestellt, dass Folgendes angezeigt wird: inline-block. Dadurch können sie sich wie Inline-Elemente verhalten, jedoch mit fester Breite und Höhe.
• Das .stretch-Element fungiert als Abstandshalter zwischen den .box-Elementen. Es ist auf „Breite: 100 %;“ eingestellt, wodurch es gestreckt wird, um den verbleibenden Platz auszufüllen.
• font-size: 0; und line-height: 0 beheben ein Problem in IE6.

Wenn die Größe des Browsers geändert wird, passt das .stretch-Element seine Breite an, um den Abstand zwischen den .box-Elementen beizubehalten, was zu einem flüssigen Layout führt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Container mit fließender Breite und gleichmäßig verteilten DIVs?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!