Wie positioniert man drei Divs mithilfe von CSS am besten nebeneinander?

So positionieren Sie drei Div-Elemente nebeneinander mit CSS

Die Möglichkeit, Elemente in CSS schweben zu lassen, ist ein leistungsstarkes Werkzeug zum Erstellen flexible Layouts. Wenn es jedoch darum geht, drei Elemente nebeneinander zu positionieren, kann die Aufgabe etwas anspruchsvoller erscheinen.

Das Problem:

Es ist bekannt, wie um zwei Elemente horizontal zu schweben, indem man eines auf „links schwebend“ und das andere auf „rechts schwebend“ einstellt. Die Ausweitung dieser Technik auf drei Elemente kann jedoch Fragen über den besten Ansatz aufwerfen.

Die Frage:

Für ein Layout, das aus drei div-Elementen besteht, sollten CSS-Floats vorhanden sein? verwendet oder ist die Verwendung von Tabellen eine geeignetere Lösung?

Die Antwort:

Es besteht kein Grund, darauf zurückzugreifen zu Tabellen, wenn drei Divs nebeneinander mit CSS ausgerichtet werden. Die Lösung besteht darin, jedem Div eine bestimmte Breite zuzuweisen und den Befehl float: left; anzuwenden. Eigentum für alle. Hier ist ein Beispiel, das diesen Ansatz demonstriert:

<div>

In diesem Beispiel dient das übergeordnete Div als Container mit einer angegebenen Breite. Den drei untergeordneten Divs wird dann jeweils eine bestimmte Breite zugewiesen und sie werden nach links verschoben, wodurch sie innerhalb des übergeordneten Divs horizontal ausgerichtet werden. Das Klare: links; Der Stil wird auf das abschließende
-Element angewendet, um sicherzustellen, dass der Inhalt unterhalb der schwebenden Divs nicht von deren Positionierung beeinflusst wird.

Das obige ist der detaillierte Inhalt vonWie positioniert man drei Divs mithilfe von CSS am besten nebeneinander?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!