Horizontale lay-outs van allerlei aard hebben me geïntrigeerd sinds ik erachter kwam dat je dat zou kunnen doen. Ik weet niet precies waarom ik gefascineerd ben door hen ... misschien is het gewoon mijn innerlijke rebellerende praat. Wat de reden ook is, ik ben bijna klaar om verticaal scrollen verouderde, passé en zoooo het laatste millennium te verklaren.

Oké, dat is niet precies wat ik bedoel. Toch, met de plotselinge toename van het aantal aanraakschermen die rondslingeren, wordt het moeilijker om te beweren dat "op en neer" onze beste opties zijn. "Rechts en links" zijn uitvoerbare aanwijzingen voor het plaatsen van inhoud geworden, zolang u niet te maken hebt met aanzienlijke hoeveelheden tekst.

Ik heb echter nooit de moeite genomen om echt een horizontale lay-out te maken. De technische problemen en beperkingen leken altijd groter te zijn dan de eventuele stilistische of navigatievoordelen. Dat was echter eerder; en dit is nu ...

Ik kwam de techniek die in dit artikel wordt beschreven tegen op de manier waarop ik meestal dingen tegenkom: door te proberen iets anders helemaal te doen. Ik probeerde (je kunt lachen) om een ​​CSS-gridraamwerk te maken op basis van display: table-cell (oke, stop nu met lachen).

Welnu, om redenen die nu voor de hand lijken te liggen, werkte het niet. U probeert een responsief afbeeldingsraster te maken met de eigenschap table-cell. Ga je gang, ik wacht.

Simpel gezegd, tabelcellen zijn ontworpen om een ​​enkele, horizontale rij te vormen. (Ik zei stop met lachen!) Dat is wat ze doen, en ze vinden het niet leuk als je ze iets anders laat doen. Ik gaf dat project op. Een paar weken later overwoog ik om mijn portfolio opnieuw te ontwerpen.

Ik dacht dat het leuk zou zijn om al mijn projecten op één pagina te plaatsen. Ik heb verschillende organisatorische oplossingen overwogen voor het weergeven van mijn web-, schrijf- en fotoprojecten en bedacht dit: ik wil deze drie categorieën weergeven als horizontaal door rijen van miniaturen scrollen.

Op dat moment raakte het mij: "Tabelcellen zouden daar perfect voor zijn. Je kunt ook dingen verticaal in het midden centreren! Ik ben zo slim dat het pijn doet! "[Enige dramatisering hier.]

Ik ben nog niet gegaan en heb mijn site opnieuw ontworpen, in plaats daarvan heb ik de twee voorbeelden van mijn techniek gecodeerd in het ZIP-bestand waarnaar wordt verwezen aan de onderkant van dit artikel.

Laat het werken

Dus om je een visueel beeld te geven, hier is een demo Ik heb me ontwikkeld.

Dit is hoe elke rij wordt gemarkeerd:

Project Title

Van daaruit is de CSS die nodig is om het te laten werken eenvoudig genoeg:

// 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;}

Sommige horizontale lay- outtechnieken vereisen dat het containerelement ( div.horizontal, in dit geval) een gedefinieerde pixelbreedte heeft die gelijk is aan de gecombineerde breedte van de elementen die het bevat. Andere technieken vereisen weergave: inline-block; Ik ben geen fan van deze techniek. Met table-cell blijft u elementen toevoegen wanneer u maar wilt, en u bent klaar om te gaan - het is perfect voor gebruik met een CMS.

Volledig scherm maken

Oké, de andere horizontale indeling is de horizontale weergave op volledig scherm. Voor het maken van dit met de eigenschap table-cell is JavaScript vereist. Ik heb jQuery gebruikt om dingen te versnellen. De JS-vereiste kan deze techniek situationeler bruikbaar maken, maar het is nog steeds cool.

Hier is een werkende demo.

De opmaak is vergelijkbaar:

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

Hier is het echter maar één "rij" die is gemaakt om in de grootte van het browservenster te passen. Elk

// 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);});