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

Flüssigkeitsbreite mit gleichmäßig verteilten DIVs

Ein Benutzer möchte ein Container-DIV mit Flüssigkeitsbreite und vier untergeordneten DIVs mit gleichen Abmessungen (300 Pixel) erstellen x 250px). Die Anforderung besteht darin, dass das erste DIV nach links schwebt, das letzte nach rechts schwebt und die verbleibenden beiden gleichmäßig zwischen ihnen verteilt sind, während die Reaktionsfähigkeit erhalten bleibt.

Lösung:

Berücksichtigen Sie das folgende CSS und HTML Implementierung:

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

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

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

<div>
<p><strong>Erklärung:</strong></p>
<ul>
<li>Das #container DIV nutzt text-align: justify und display: inline-block-Eigenschaften zum Ausrichten die untergeordneten DIVs.</li>
<li>Inline-Block wird in modernen Browsern unterstützt, aber um die browserübergreifende Kompatibilität sicherzustellen, haben wir Verwenden Sie display: inline mit zoom: 1 für IE6/7.</li>
<li>In IE6 sind Inline-Block-Elemente nicht richtig beabstandet, daher wird eine Breite von 100 % mit Schriftgröße: 0 und Zeilenhöhe: 0 behoben dieses Problem.</li>
<li>Ein span-Element mit der Klasse „stretch“ füllt den verbleibenden Platz im Container aus, um die DIVs zu verteilen gleichmäßig.</li>
<li>Die untergeordneten DIVs werden zu Demonstrationszwecken auf die gewünschten Abmessungen eingestellt und mit bestimmten Hintergrundfarben versehen.</li>
</ul>
</div>

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen 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!