Horizontale Layouts aller Art haben mich fasziniert, seit ich herausgefunden habe, dass du das kannst. Ich weiß nicht genau, warum ich von ihnen fasziniert bin ... vielleicht ist es nur mein innerer Rebell, der redet. Was auch immer der Grund ist, ich bin gerade dabei, das vertikale Scrollen für veraltet, passé und soooo letztes Jahrtausend zu erklären.

Okay, das ist nicht wirklich was ich meine. Mit dem plötzlichen Anstieg der Anzahl an Touchscreens, die herumliegen, wird es immer schwieriger zu behaupten, dass "Auf und Ab" unsere besten Optionen sind. "Right and Left" hat sich zu einem brauchbaren Weg für die Platzierung von Inhalten entwickelt, solange Sie nicht mit großen Textmengen zu tun haben.

Ich habe mir aber nie die Mühe gemacht, irgendwelche horizontalen Layouts zu bauen. Die technischen Probleme und Einschränkungen schienen immer alle stilistischen oder navigatorischen Vorteile aufzuwiegen. Das war vorher jedoch; und das ist jetzt ...

Ich stieß auf die Technik, die in diesem Artikel beschrieben wird, auf die Art und Weise, wie ich normalerweise auf Dinge stoße: indem ich versuche, etwas ganz anderes zu tun. Ich habe versucht (Sie können lachen), ein CSS-Grid-Framework basierend auf dem Display zu erstellen: Tabellenzelle (okay, hör jetzt auf zu lachen).

Nun, aus Gründen, die jetzt offensichtlich erscheinen, hat es nicht funktioniert. Sie versuchen, mit der Tabellenzelleneigenschaft ein reaktionsfähiges Bildraster zu erstellen. Mach weiter, ich warte.

Einfach gesagt, Tabellenzellen sind so konzipiert, dass sie eine einzige horizontale Reihe bilden. (Ich sagte, hör auf zu lachen!) Das tun sie, und sie mögen es nicht, wenn du versuchst, sie dazu zu bringen, etwas anderes zu tun. Ich habe dieses Projekt aufgegeben. Ein paar Wochen später dachte ich darüber nach, mein Portfolio neu zu gestalten.

Ich dachte, es wäre schön, alle meine Projekte auf eine Seite zu stellen. Ich habe mehrere organisatorische Lösungen für die Darstellung meiner Web-, Schreib- und Fotografie-Projekte in Betracht gezogen und kam zu dem Ergebnis: Ich möchte diese drei Kategorien als horizontale Scroll-Reihen von Thumbnails anzeigen.

Da hat es mich getroffen: "Tischzellen wären dafür perfekt. Außerdem können Sie Dinge vertikal in ihnen zentrieren! Ich bin so schlau, es tut weh! "[Etwas Dramatisierung hier.]

Ich bin noch nicht gegangen und habe meine Seite neu gestaltet, stattdessen habe ich die beiden Beispiele meiner Technik, die in der .zip-Datei am Ende dieses Artikels verlinkt sind, programmiert.

Es funktioniert

Also, um Ihnen eine visuelle, hier ist ein Demo habe ich aufgearbeitet.

So wird jede Zeile markiert:

Project Title

Von dort ist das CSS, das benötigt wird, um es zum Laufen zu bringen, einfach genug:

// This container element gives us the scrollbars we want.div.horizontal {width: 100%;height: 400px;overflow: auto;}// table-layout: fixed does a lot of the magic, here. It makes sure that the "table cells" retain the pixel dimensions you want..table {display: table;table-layout: fixed;width: 100%;}// Arranging your content inside the "cells" is as simple as using the vertical-align and text-align properties. Floats work, too.article {width: 400px;height: 400px;display: table-cell;background: #e3e3e3;vertical-align: middle;text-align: center;}// Some styling for contrast.article:nth-child(2n+2){background: #d1d1d1;}

Einige horizontale Layouttechniken erfordern, dass das Containerelement ( div.horizontal, in diesem Fall) eine definierte Pixelbreite aufweist, die der kombinierten Breite der Elemente entspricht, die es enthält. Andere Techniken erfordern Anzeige: Inline-Block; Ich bin kein Fan dieser Technik. Mit Table-Cell fügen Sie immer Elemente hinzu, wann immer Sie möchten, und Sie können loslegen - es ist perfekt für die Verwendung mit einem CMS.

Vollbildmodus machen

Okay, die andere Art von horizontalem Layout ist das horizontale Layout im Vollbildmodus. Um dies mit der Eigenschaft table-cell zu erstellen, ist JavaScript erforderlich. Ich habe jQuery verwendet, um die Dinge zu beschleunigen. Die JS-Anforderung könnte diese Technik situationsbezogen nützlicher machen, aber sie ist immer noch cool.

Hier ist eine funktionierende Demo.

Das Markup ist ähnlich:

Full-Screen Horizontal Layouts
Made with display: table-cell;
  Von Ezequiel Bruni 

Hier wurde jedoch nur eine Zeile an die Größe des Browserfensters angepasst. Jeder

// Don't touch this part. It helps.html, body {width: 100%;height: 100%;overflow: hidden;}// In this case, I didn't want a scrollbar, so I used overflow: hidden. The container element is more essential than ever, though. The body element will not do.div.horizontal {display: block;width: 100%;height: 100%;overflow: hidden;position: static;}.table {display: table;table-layout: fixed;width: 100%;height: 100%;}.table > section {width: 1600px; // The width is based on my monitor. It's replaced by jQuery anyway. Percentage widths do not work.height: 100%;display: table-cell;background: #e3e3e3;vertical-align: middle;text-align: center;}

$(window).load(function() {var vWidth = $(window).width();var vHeight = $(window).height();$('.table > section').css('width', vWidth).css('height', vHeight);});$(window).resize(function() {var vWidth = $(window).width();var vHeight = $(window).height();$('.table > section').css('width', vWidth).css('height', vHeight);});