Wie kann man mit CSS drei Divs nebeneinander schweben lassen?

Drei Divs nebeneinander mit CSS schweben lassen

Das Erstellen eines horizontalen Layouts von Divs kann erreicht werden, indem man sie nebeneinander schweben lässt. Während es mit zwei Divs unkompliziert ist, stellt sich die Frage: Wie erreicht man den gleichen Effekt mit drei oder mehr Divs?

Die Lösung besteht darin, für jedes Div eine Breite zu definieren und die CSS-Eigenschaft float anzuwenden: links;. Diese Eigenschaft positioniert die Divs horizontal und zwingt sie, nebeneinander zu fließen.

Betrachten Sie zur Veranschaulichung das folgende Beispiel:

<div>

In diesem Code erstellen wir ein übergeordnetes Div mit a feste Breite von 500 Pixel. Darin haben wir drei untergeordnete Divs, jedes mit seiner eigenen angegebenen Breite. Der Schwimmer: links; Die Eigenschaft stellt sicher, dass diese untergeordneten Divs horizontal ausgerichtet sind.

Schließlich wird ein
Element mit der CSS-Eigenschaft clear: left; wird am Ende des übergeordneten Div hinzugefügt. Dadurch werden alle schwebenden Elemente gelöscht und sichergestellt, dass der verbleibende Inhalt unter den drei Divs in einer Linie mit dem linken Rand des übergeordneten Divs angezeigt wird.

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS drei Divs nebeneinander schweben lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!