Horisontella layouter av alla slag har fascinerat mig ända sedan jag fick reda på att du kunde göra det. Jag vet inte exakt varför jag är fascinerad med dem ... kanske är det bara min inre rebelltalande. Oavsett orsaken är jag bara redo att förklara vertikal rullning föråldrad, passé och såååå senaste årtusendet.

Okej, det är inte riktigt vad jag menar. Ändå blir det svårare att hävda att "upp och ner" är våra bästa alternativ med den plötsliga ökningen av mängden pekskärmar som ligger runt. "Höger och vänster" har blivit genomförbara anvisningar för innehållsplacering, så länge du inte hanterar betydande volymer text.

Jag har aldrig stört att verkligen bygga några horisontella layouter, dock. De tekniska problemen och begränsningarna tycktes alltid uppväga eventuella stilistiska eller navigationsfördelar. Men det var förut och det här är nu ...

Jag kom över tekniken som beskrivs i den här artikeln på det sätt som jag vanligtvis stöter på saker: genom att försöka göra någonting annat helt. Jag försökte (du kan skratta) för att skapa ett CSS-rutnätverk baserat på visning: tabellcell (okej, sluta skratta nu).

Tja, av skäl som nu verkar uppenbara fungerade det inte. Du försöker skapa ett lyhörd bildrutor med egenskapen för tabellcell. Fortsätt, jag väntar.

Enkelt uttryckt är bordsceller konstruerade för att bilda en enda, horisontell rad. (Jag sa sluta skratta!) Det är vad de gör, och de tycker inte om det när du försöker få dem att göra någonting annat. Jag gav upp på det projektet. Några veckor senare övervägde jag dock om att omforma min portfölj igen.

Jag trodde det skulle vara trevligt att sätta alla mina projekt på en sida. Jag betraktade flera organisatoriska lösningar för att visa mina webb-, skrivnings- och fotoprojekt och kom fram till detta: Jag vill visa dessa tre kategorier som horisontellt rullande rader miniatyrbilder.

Det var då det slog mig: "Bordsceller skulle vara perfekta för det. Du kan också vertikalt centrera saker i dem! Jag är så smart att det gör ont! "[En del dramatisering här.]

Jag har inte gått och redesignat min sida än, istället kodade jag de två exemplen på min teknik som finns i .zip-filen länkad till längst ner i den här artikeln.

Gör det till jobbet

Så, för att ge dig en visuell, här är en Demo Jag har arbetat upp.

Så här är varje rad markerad:

Project Title

Därifrån krävs CSS för att få det att fungera enkelt:

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

Vissa horisontella layouttekniker kräver att behållarelementet ( div.horizontal, i detta fall) har en definierad pixelbredd som är lika med den kombinerade bredden av elementen som den innehåller. Andra tekniker kräver visning: inline-block; Jag är inte en fan av denna teknik. Med bordcell behåller du bara att lägga till element när du behöver, och du är bra att gå - den är perfekt för användning med ett CMS.

Gör det på helskärm

Okej, den andra typen av horisontell layout är helskärms horisontell layout. Att skapa detta med egenskapen för tabellcell kräver lite JavaScript. Jag använde jQuery för att påskynda sakerna. JS-kravet kan göra denna teknik mer situationally användbar, men det är fortfarande coolt.

Här är en fungerande demo.

Markeringen är liknande:

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

Men det är bara en "rad" som har gjorts för att passa storleken på webbläsarfönstret. Varje

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