Wie erreicht man eine Flüssigkeitsbreite und einen gleichmäßigen Abstand für vier DIVs in einem Container?

Flüssigkeitsbreite mit gleichmäßig verteilten DIVs

Frage:

Sie haben einen Behälter mit Flüssigkeitsbreite DIV mit vier DIVs mit jeweils festen Abmessungen. Wie können Sie Box 1 nach links, Box 4 nach rechts verschieben und die Boxen 2 und 3 gleichmäßig dazwischen verteilen und dabei einen fließenden Abstand beibehalten, wenn sich die Größe des Browserfensters ändert?

**Antwort:

Ein vollständiges Beispiel finden Sie in der bereitgestellten JSFiddle: http://jsfiddle.net/thirtydot/EDp8R/

Erklärung:

Diese Lösung nutzt mehrere Techniken, um das gewünschte Layout zu erreichen:

• text-align: justify;: Dadurch werden die DIVs horizontal ausgerichtet und der Abstand dazwischen verteilt sie.
• .stretch: Ein Bereich mit einer Breite von 100 %. Es wird erweitert, um die verbleibende Breite des Containers auszufüllen.
• display:inline-block; *display:inline; zoom:1;:Stellt das Inline-Block-Verhalten für IE6/7 sicher.
• font-size: 0; line-height: 0;: Verhindert vertikalen Raum, der durch Inline-Block in IE6 verursacht wird.

Durch die Kombination dieser Techniken werden die DIVs unabhängig davon fließend, gleichmäßig verteilt und schwebend positioniert die Behälterbreite.

Das obige ist der detaillierte Inhalt vonWie erreicht man eine Flüssigkeitsbreite und einen gleichmäßigen Abstand für vier DIVs in einem Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!