Linke halbe und rechte halbe Layout - viele verschiedene Arten

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!