Wie erstelle ich Container mit flüssiger Breite und gleichmäßig verteilten DIVs?

Container mit fließender Breite und gleichmäßig verteilten DIVs

Sie haben einen Container-DIV mit einer fließenden Breite und möchten darin vier DIVs platzieren Container. Jeder DIV sollte 300 x 250 Pixel groß sein. Sie möchten, dass Box 1 nach links schwebt, Box 4 nach rechts und die Boxen 2 und 3 gleichmäßig zwischen den Boxen 1 und 4 verteilt sind. Darüber hinaus möchten Sie, dass der Abstand fließend ist und sich an die Größe des Browserfensters anpasst.

Lösung:

Um dies zu erreichen, verwenden Sie Folgendes Code:

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

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

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

.box1,
.box3 {
  background: #ccc
}

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

<div>

Diese Lösung nutzt die folgenden Techniken:

• text-align: justify: Verteilt die Boxen gleichmäßig im Container.
• .stretch: Ein unsichtbares Element, das den verbleibenden Raum ausfüllt und so für Gleichmäßigkeit sorgt Abstand.
• display:inline-block: Ermöglicht die Positionierung der Boxen inline und im Abstand mithilfe der Blocksatzausrichtung.
• font-size: 0; Zeilenhöhe: 0: Behebt ein Problem mit IE6.

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