Vor Jahren untersuchte CSS-Tricks verschiedene Methoden zum Erstellen eines zweispaltigen Layouts. Dieser aktualisierte Artikel bietet einen umfassenden überblick über diese Techniken.

Nehmen wir an, Sie ben?tigen ein Layout, das in zwei Spalten mit gleichem hohen Spalten in einem Container aufgeteilt ist. Zahlreiche CSS -Ans?tze erreichen dies und wir werden mehrere untersuchen.

update (25. Oktober 2024): Dieser Artikel enth?lt nun ein Beispiel mit der CSS -Ankerpositionierung.

Hintergrundgradiententechnik

Ein einfacher visueller Ansatz verwendet Hintergrundgradienten. Definieren Sie die H?lfte des Hintergrunds mit einer Farbe und der anderen H?lfte mit einer anderen Farbe. Ein Farbstopp im Nullraum erzeugt eine scharfe Abteilung:

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

Dies funktioniert mit einem einzelnen Container, erfordert jedoch Schwimmer oder andere Layoutmethoden, wenn der Inhalt beide Seiten füllen muss.

Absolute Positionierungsmethode

Verwenden Sie alternativ zwei Container innerhalb eines Elternteils, positionieren Sie sie absolut und teilen Sie den Raum mit Prozents?tzen auf. Dies erm?glicht unabh?ngigen Inhalten für jede Spalte. Der Elternteil ben?tigt jedoch eine feste H?he, die mit dynamischem Inhalt problematisch sein kann. Die absolute Positionierung entfernt auch Elemente aus dem Dokumentenfluss, was m?glicherweise andere Inhalte beeinflusst.

(gef?lschte) Tabellenansatz

W?hrend Tabellen für Layout veraltet sind (und Bedenken hinsichtlich der Zug?nglichkeit darstellen), bietet display: table-cell; eine bequeme L?sung. Der Elternbeh?lter wird zu einer Tabelle, und Kindercontainer werden zu Zellen, die alle in CSS behandelt werden. Diese Methode ist leicht an verschiedene Bildschirmgr??en anpassen, indem die Anzeigeeigenschaften an Haltepunkten ge?ndert werden. Es genie?t einen breiten Browserunterstützung und stammt aus IE8.

Verwenden von Floats

Schwimmer bieten eine andere Option, wodurch die Komplikationen der absoluten Positionierung vermieden werden. Explizite H?heneinstellungen sorgen für sogar Spaltenh?hen, obwohl Floats diese Funktionalit?t nicht von Natur aus liefern. Hintergrundgradienten oder andere Techniken k?nnen die Illusion gleicher H?he erzeugen. Denken Sie daran, den übergeordneten Schwimmer zu l?schen, um den ordnungsgem??en Dokumentenfluss aufrechtzuerhalten.

Inline-Block-Methode

display: inline-block; bietet eine sauberere Alternative zu Floats und vermeidet die Notwendigkeit des L?schens. Stellen Sie jedoch sicher, dass zwischen den HTML -Elementen für die S?ulen keine Leerzeichen oder Linienbrüche vorhanden sind, um unerwünschten Abstand zu verhindern. Auch hier sind explizite H?heneinstellungen für gleiche Spaltenh?hen erforderlich.

Flexbox -L?sung

Flexbox bietet eine elegante L?sung, obwohl die Unterstützung auf IE10 und h?her beschr?nkt ist. Der übergeordnete Container wird zu einer Flexbox, und untergeordnete Container teilen automatisch Platz. Das Einstellen flex: 1; auf den untergeordneten Containern sorgt für eine gleiche Verteilung. Diese Methode behandelt die vertikale und horizontale Zentrierung effektiv.

Gitterlayout

Für fortgeschrittene Benutzer kombiniert CSS Grid Layout die Flexibilit?t von Flexbox und den Tabellenansatz. Definieren Sie einen Beh?lter und teilen Sie ihn dann in S?ulen und Zellen auf, die mit untergeordneten Elementen gefüllt werden k?nnen.

CSS -Ankerpositionierung (neu!)

CSS -Ankerpositionierung, eine neuere Funktion (2024), erm?glicht die Verknüpfung nicht verwandter Elemente. Ein "Anker" -Element ist definiert und ein "Ziel" -Element wird daran festgehalten. Dies bietet eine pr?zise Kontrolle über die Positionierung:

.container {
  background: linear-gradient(to right, #ff9e2c 0%, #ff9e2c 50%, #b6701e 50%, #b6701e 100%);
}

Die Fülle der CSS -Techniken unterstreicht seine Vielseitigkeit.

Das obige ist der detaillierte Inhalt vonLinke halbe und rechte halbe Layout - viele verschiedene Arten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!