Implementierungsmethode des mehrspaltigen Layouts in der Frontend-Entwicklung

Dieses Mal werde ich Ihnen die Implementierungsmethode des mehrspaltigen Layouts in der Front-End-Entwicklung vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung des mehrspaltigen Layouts in der Front-End-Entwicklung? Fall, werfen wir einen Blick darauf.

Mehrspaltiges Layout

Mehrspaltiges Layout ist auch in der Web-Frontend-Entwicklung relativ üblich, z. B. die üblichen drei Spalten, vier Spalten und mehr. Das Spaltenlayout ermöglicht die Anzeige stärker kategorisierter Inhalte auf einer einzelnen Seite. Die hier erwähnten mehrspaltigen Layouts umfassen zwei Spalten mit fester Breite und eine adaptive Spalte, mehrere Spalten mit variabler Breite und eine adaptive Spalte sowie ein mehrspaltiges Layout.

Zwei Spalten mit fester Breite und eine Spalte mit adaptivem Layout

Dieser Layoutmodus ist in drei Spalten unterteilt, von denen zwei eine feste Breite haben und eine Spalte, deren Breite sich mit der Breite des Inhalts ändert.

Zwei Spalten mit fester Breite plus eine adaptive Spalte

In diesem Fall ist die Höhe jeder Spalte adaptiv, das heißt, die Höhe stimmt mit der Höhe des Inhalts überein. Die Breite der linken Spalte und der mittleren Spalte beträgt 100 Pixel, und die Breite der rechten Spalte ist adaptiv wird durch FloatFloating-Layout in Kombination mit den Eigenschaften von Blockebenenelementen implementiert. Es ist zu beachten, dass die Hintergrundfarbe auf dem p-Tag oder auf dem p-Tag eingestellt werden kann.

Mehrere Spalten mit variabler Breite plus eine adaptive Spalte

Der hier erläuterte Fall ist ein hochgradig adaptives Layoutschema mit zwei Spalten variabler Breite und einer adaptiven Spalte,

Hier sind mehrere Spalten mit variabler Breite plus eine adaptive Spalte

Das erste, was man verstehen muss, ist die variable Breite, die bedeutet, dass die Breite der Spalte jederzeit auf andere Werte eingestellt werden kann. Hier können wir die Breite der Spalte in der linken Spalte auf einen beliebigen Wert einstellen, ohne das Layout zu ändern Modus, also sehen wir, dass der Code zum Implementieren dieses Layouts derselbe ist wie oben. Zu beachten ist der Unterschied zwischen variabler Breite und adaptiver Breite.

Mehrspaltige Gleichteile

Das mehrspaltige Layout dient dazu, mehrere Spalten auf der Seite anzuzeigen. Die Breite dieser Spalten ist konsistent, und die Höhe ist anpassbar

Einfache Implementierung einer mehrspaltigen Verteilung Stellen Sie

margin-left

im übergeordneten Container auf -20 Pixel ein, addieren Sie 20 Pixel zur Breite des übergeordneten Containers, stellen Sie im Spaltencontainer „Left Floating“ ein und legen Sie die Breite jedes untergeordneten Containers auf 25 % des übergeordneten Containers fest Setzen Sie gleichzeitig den Untercontainer padding-left auf 20px und den Anzeigemodus auf border-box (die Breite und Höhe des Boxmodells, das in diesem realistischen Fall angezeigt wird). Modus sind die Breite und Höhe der Box). Diese Lösung erreicht eine gleichmäßige Verteilung, indem sie die Breite des übergeordneten Containers um 20 Pixel (Lückenbreite) vergrößert, den Abstand innerhalb des untergeordneten Containers anzeigt und den untergeordneten Container als Rahmenfeld festlegt. In diesem Artikel werden nur die Lösungen zum Implementieren eines mehrspaltigen Layouts über Float aufgeführt. Es gibt auch entsprechende Implementierungslösungen über Flex, Table usw.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonImplementierungsmethode des mehrspaltigen Layouts in der Frontend-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!