Vor vielen Jahren haben wir hier auf CSS-Tricks über diese Idee geschrieben. Wir dachten, es wäre an der Zeit, das zu aktualisieren und dem Thema gerecht zu werden.
Stellen Sie sich ein Szenario vor, in dem Sie ein Layout in zwei Hälften teilen müssen. Inhalt auf der linken und Inhalt auf der rechten Seite. Grundsätzlich werden zwei Spalten gleicher Höhe innerhalb eines Containers benötigt. Jede Seite nimmt genau die Hälfte des Containers ein, wodurch ein deutlicher Bruch zwischen den beiden entsteht. Wie bei vielen Dingen in CSS gibt es eine Reihe von Wegen, dies zu erreichen, und wir werden viele davon gleich durchgehen!
Verwendung von Hintergrundverläufen
Eine einfache Möglichkeit, das Erscheinungsbild eines sich ändernden Hintergrunds zu erzeugen, ist die Verwendung von Verläufen. Die eine Hälfte des Hintergrunds wird auf eine Farbe gesetzt und die andere Hälfte auf eine andere Farbe. Anstatt von einer Farbe zur anderen zu verblassen, wird in der Mitte ein Farbstopp mit Null Abstand gesetzt.
.container {
background: linear-gradient(
to right,
#ff9e2c 0%,
#ff9e2c 50%,
#b6701e 50%,
#b6701e 100%
);
}Dies funktioniert mit einem einzigen Container-Element. Das bedeutet jedoch auch, dass man mit Floats oder möglicherweise einer anderen Layout-Methode arbeiten muss, wenn Inhalte beide Seiten des Containers füllen sollen.
Siehe den Pen Linke Hälfte / Rechte Hälfte mit Hintergrundverlauf von CSS-Tricks (@css-tricks) auf CodePen.
Verwendung von absoluter Positionierung
Ein anderer Weg könnte darin bestehen, zwei Container in einem übergeordneten Container einzurichten, sie absolut zu positionieren, sie mit Prozentwerten in Hälften zu teilen und dann die Hintergründe anzuwenden. Der Vorteil hierbei ist, dass wir nun zwei separate Container haben, die ihren eigenen Inhalt aufnehmen können.
Siehe den Pen Linke Hälfte / Rechte Hälfte mit absoluter Positionierung von CSS-Tricks (@css-tricks) auf CodePen.
Absolute Positionierung ist manchmal eine perfekte Lösung und manchmal unhaltbar. Der übergeordnete Container muss hier eine festgelegte Höhe haben, und das Festlegen von Höhen ist oft schlecht für Inhalte (Inhalte ändern sich!). Ganz zu schweigen davon, dass absolut positionierte Elemente aus dem Dokumentfluss entfernt werden. Es wäre also schwierig, dies zum Laufen zu bringen, während beispielsweise anderer Inhalt darunter geschoben wird.
Verwendung von (Fake-)Tabellen
Ja, ja, Tabellen sind so altmodisch (ganz zu schweigen von den Problemen mit der Barrierefreiheit und der mangelnden Flexibilität im Layout). Nun, die Verwendung der Eigenschaft display: table-cell; kann tatsächlich eine praktische Methode sein, um dieses Layout zu erstellen, ohne HTML-Tabellen-Markup zu schreiben. Kurz gesagt, wir verwandeln unseren semantischen übergeordneten Container in eine Tabelle und die untergeordneten Container in Zellen innerhalb der Tabelle – alles in CSS!
Siehe den Pen Linke Hälfte / Rechte Hälfte mit Display Table von CSS-Tricks (@css-tricks) auf CodePen.
Sie könnten die Display-Eigenschaften bei Breakpoints sogar ziemlich einfach ändern, sodass die Seiten auf kleineren Bildschirmen gestapelt werden. display: table; (und Freunde) wird bereits seit IE 8 und sogar alten Androids unterstützt, ist also ziemlich sicher!
Verwendung von Floats
Wir können unseren guten Freund float verwenden, um die Container nebeneinander anzuordnen. Der Vorteil hierbei ist, dass er absolute Positionierung vermeidet (die, wie wir bereits bemerkt haben, unübersichtlich sein kann).
Siehe den Pen Linke Hälfte / Rechte Hälfte mit Floats von CSS-Tricks (@css-tricks) auf CodePen.
In diesem Beispiel legen wir explizit Höhen fest, um sie gleichmäßig zu machen. Aber diese Möglichkeit haben Sie bei Floats standardmäßig nicht wirklich. Sie könnten den bereits besprochenen Hintergrundverlaufstrick verwenden, damit sie einfach gleichmäßig *aussehen*. Oder Sie schauen sich verrückte negative Margin-Tricks und dergleichen an.
Denken Sie auch daran, dass Sie möglicherweise die Floats am übergeordneten Element löschen müssen, um den Dokumentenfluss beizubehalten.
Verwendung von Inline-Block
Wenn das Löschen von Elementen nach Floats mühsam erscheint, ist die Verwendung von display: inline-block eine weitere Option. Der Trick hierbei ist, sicherzustellen, dass die Elemente für die einzelnen Seiten keine Brüche oder Leerzeichen dazwischen im HTML aufweisen. Andernfalls wird dieser Platz als tatsächliches Leerzeichen gerendert und die zweite Hälfte bricht ab und fällt nach unten.
Siehe den Pen Linke Hälfte / Rechte Hälfte mit Inline-Block von CSS-Tricks (@css-tricks) auf CodePen.
Auch hier hilft nichts an Inline-Block, um die Höhen der Seiten auszugleichen, sodass Sie dies explizit tun müssen.
Es gibt auch weitere potenzielle Wege, um dieses oben beschriebene Abstands-Problem zu lösen.
Verwendung von Flexbox
Flexbox ist eine ziemlich fantastische Methode dafür. Beachten Sie nur, dass sie auf IE 10 und höher beschränkt ist und Sie möglicherweise mit Präfixen und Werten kreativ werden müssen, um die beste Unterstützung zu erhalten.
Bei dieser Methode verwandeln wir unseren übergeordneten Container in eine flexible Box, wobei die untergeordneten Container einen gleichen Anteil am Platz einnehmen. Keine Notwendigkeit, Breiten oder Höhen festzulegen! Flexbox weiß einfach, was zu tun ist, da die Standardeinstellungen perfekt darauf abgestimmt sind. Zum Beispiel sind flex-direction: row; und align-items: stretch; das, was wir suchen, aber das sind die Standardwerte, also müssen wir sie nicht festlegen. Um sicherzustellen, dass sie jedoch gleichmäßig sind, ist das Festlegen von flex: 1; auf den Seiten eine gute Idee. Dies zwingt sie, gleiche Anteile am Platz einzunehmen.
Siehe den Pen Linke Hälfte / Rechte Hälfte mit Flexbox von CSS-Tricks (@css-tricks) auf CodePen.
In dieser Demo machen wir die Seiten-Flex-Container ebenfalls zu Flex-Containern, nur zum Spaß, um die vertikale und horizontale Zentrierung zu handhaben.
Verwendung von Grid Layout
Für diejenigen, die am Puls der Zeit leben, ist die CSS Grid Layout-Technik wie die Methoden Flexbox und Tabelle in einer zusammengeführt. Mit anderen Worten, ein Container wird definiert, dann in Spalten und Zellen aufgeteilt, die flexibel mit untergeordneten Elementen gefüllt werden können.
Wenn die Zellen im folgenden Demo gestapelt sind, unterstützt Ihr Browser kein CSS Grid. Zum Zeitpunkt des Schreibens ist die Unterstützung auf Firefox, Chrome, Safari und Opera beschränkt (außer Opera Mini).
Siehe den Pen Linke Hälfte / Rechte Hälfte mit Grid Layout von CSS-Tricks (@css-tricks) auf CodePen.
Ist es nicht cool, wie viele Wege es gibt, Dinge in CSS zu tun?
Ich benutze oft (Fake-)Tabellen; immer wenn ich Inhalte variabler Größe habe und alles die gleiche Höhe haben möchte; immer wenn ich horizontale Elemente mit gewichteten Breiten (wie eine Navigationsleiste) haben möchte; immer wenn ich
vertical-align: [egal was];für Inhalte haben möchte. Vieles davon, was Flexbox tut, kann man mit display table erreichen. Ich denke, während wir auf eine universellere Unterstützung für Flexbox warten, sollten die Leute Tabellenanzeigen griffbereit in ihrem Werkzeugkasten behalten.Genau so arbeite ich. Ich benutze Harry Roberts 'Flag-Objekt' ausgiebig. Vieles von dem, was Flexbox tut, kann man mit Display Table erreichen. Ich arbeite gerne weiterhin so, bis wir die Unterstützung für IE9 einstellen.
Sie können auch CSS-Spalten verwenden. Es wird von IE 10, Chrome 4+, Firefox 2+, Safari 3.1+, Opera 15+ unterstützt.
http://codepen.io/KevinMartin/pen/zxMLOz
@Chris, wenn Sie möchten, fügen Sie diesen Pen zu Ihrem Beitrag hinzu.
Kam zum Kommentieren herunter, um dasselbe zu posten. Wenn Sie Inhalte in Zeitungsabschnitte positionieren möchten, ist dies eine großartige Methode dafür!
Weitere Informationen finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
Die Spaltenlösung wäre schön, wenn sie solide wäre. Sie benötigen Inhalte gleicher Höhe, damit sie richtig funktioniert. In diesem Fall können Sie einige Dinge entfernen oder hinzufügen, um eine dritte Spalte erscheinen zu lassen – Sie erhalten eine dritte Spalte auf beide Arten, durch Löschen oder Hinzufügen. Kurz gesagt, Sie sollten es nicht verwenden, um dieses Layout zu erstellen, da es Nebeneffekte hat, die zu leicht ausgelöst werden.
Ich denke, jede der Lösungen funktioniert gut, aber die Verwendung von vh oder vw, wie im Grid-Beispiel gezeigt, funktioniert am besten.
Hood teilt sehr nützliches Wissen.
Die Version mit Hintergrundverlauf führt in FF37 zu einer leicht unscharfen Kante zwischen den beiden Farben, alle anderen sind scharf.
Wir strebten dasselbe an, ein links-rechts Basislayout, wir wollen, dass es eine feste (linke)-fließende (rechte) Spalte und umgekehrt ist. Außerdem wollten wir eine responsive Lösung.
Daher haben wir es mit einer gemischten Lösung implementiert: feste, geflutete Spaltenelemente, Hintergrundverlauf und ein solider Hintergrund für die Seitenleiste mit negativem Margin.
[linke Seitenleiste: https://www.skroutz.gr/c/40/kinhta-thlefwna.html und
rechte Seitenleiste https://www.skroutz.gr/c/86/kinhth-thlefwnia.html%5D
Auch ich bin einige der Wege gefolgt, um diesen Effekt zu erzielen, aber ich kann mich immer noch nicht entscheiden, welchen man berücksichtigen sollte, wenn er responsiv sein soll.
Alle oben genannten sind responsiv und können durch Hinzufügen von Media Queries weiter responsiv gemacht werden, um auf verschiedenen Bildschirmgrößen unterschiedlich zu reagieren.
Ich habe gemischte Techniken verwendet, um den Effekt zu erzielen. Gemischte Techniken können leistungsfähiger und flexibler sein als die Verwendung einer einzigen spezifischen Technik.
http://codepen.io/Merri/pen/MYzMro
Dies sollte in allem perfekt funktionieren, von IE8 an, einschließlich Opera Presto und Safari 5 Windows.
Und nur weil... Ich habe es mit IE6 und IE7 zum Laufen gebracht. Ich mag alberne Browser, wenn sie sich gut benehmen.
http://codepen.io/Merri/pen/ogJNgq
Ich mochte Ihre Technik wirklich. Ich habe von dort aus angefangen und ein festes-fließendes Layout mit maximaler Breite und zentrierter Positionierung implementiert.
[codepen_embed height=”268″ theme_id=”0″ slug_hash=”Byvdbw” default_tab=”result” user=”katsampu”]Siehe den Pen Linke und Rechte Hälfte Layout von Giorgos Katsiampas (@katsampu) auf CodePen.[/codepen_embed]
Ich mochte Ihre Technik wirklich. Ich habe von dort aus angefangen und ein festes-fließendes Layout mit maximaler Breite und zentrierter Positionierung implementiert.
http://codepen.io/katsampu/pen/Byvdbw
@Katsampu
Ich habe das Überlaufproblem behoben, die Zentrierung und festen Größen beibehalten, aber die Fluidität bei kleineren Breiten geopfert. Man muss sich für eine responsive Lösung entscheiden. Ein rein fließendes Layout funktioniert bei geringen Breiten auch nicht viel besser, daher halte ich die Rückkehr zu Scrollbalken für einen größeren Gewinn als den Verlust der Fluidität.
http://codepen.io/Merri/pen/bNOMzY
Eine einfachere Version des Fixed-Fluid kann recht einfach gemacht werden. Die Hintergrundfarbe/gleiche Höhe wird ignoriert.
Geben Sie Ihrer statischen Spalte einfach eine Breite und float left, und der fließenden rechten Spalte overflow hidden. Fügen Sie den gewünschten clearfix zum Container hinzu
Nein, das hat nichts mit dem hier Gezeigten zu tun. Der ganze Punkt ist, etwas zu haben, das die Formatierung von Hintergrunden gleicher Höhe ermöglicht oder den Eindruck von zwei Spalten gleicher Höhe erweckt.
Ihre Lösung ist das absolute Grundlegende von Layouts, die auf dem ersten Float basieren, und sie funktioniert nicht, wenn der Inhalt der rechten Seite länger ist als der der linken Seite: Dies führt dazu, dass der Inhalt der rechten Seite unter dem Inhalt der linken Seite fließt.
Die zweite Spalte wird nicht um die erste drapieren, auch nicht bei längerem Inhalt, da durch overflow hidden ein neuer BFC (Block Formatting Context) erstellt wird. Dennoch ist es wahr, dass diese Lösung bei Spalten gleicher Höhe nicht viel hilft.
Grid Layout ist einen Blick wert, mehr Kontrolle als Flexbox und einfacher zu handhaben als einige der anderen Methoden. Es gibt Polyfills wie https://github.com/codler/Grid-Layout-Polyfill
Ich habe früher viel mit Float innerhalb eines Divs gearbeitet. Kann mir jemand die grundlegende Leistung über verschiedene Browser und Geräte hinweg zeigen?