Horisontale layouter av alle slag har fascinert meg helt siden jeg fant ut at du kunne gjøre det. Jeg vet ikke nøyaktig hvorfor jeg er fascinert med dem ... kanskje det er bare min indre rebel snakker. Uansett årsaken, er jeg bare klar til å erklære vertikal rulling utdatert, passé og såååå siste årtusen.

Ok, det er egentlig ikke det jeg mener. Likevel, med den plutselige økningen i mengden berøringsskjermene som ligger rundt, blir det vanskeligere å påstå at "opp og ned" er våre beste alternativer. "Høyre og venstre" har blitt levedyktige retninger for innholdsplassering, så lenge du ikke har å gjøre med betydelige mengder tekst.

Jeg har aldri plaget meg å virkelig bygge noen horisontale oppsett, skjønt. De tekniske problemene og begrensningene syntes alltid å oppveie noen stilistiske eller navigasjonsfordeler det måtte være. Det var imidlertid før; og dette er nå ...

Jeg kom over teknikken beskrevet i denne artikkelen slik jeg vanligvis kommer over ting: ved å prøve å gjøre noe helt annet. Jeg forsøkte (du kan ler) for å lage et CSS-gridramme basert på display: tabell-celle (ok, slutte å le nå).

Vel, av grunner som nå virker åpenbare, virket det ikke. Du prøver å lage et responsivt bildegitter med egenskapen til tabellcellene. Fortsett, jeg venter.

Enkelt sagt er bordceller utformet for å danne en enkelt, horisontal rad. (Jeg sa slutte å le!) Det er det de gjør, og de liker ikke det når du prøver å få dem til å gjøre noe annet. Jeg ga opp på det prosjektet. Noen uker senere, men jeg vurderte å omforme porteføljen min igjen.

Jeg trodde det ville vært fint å sette alle mine prosjekter på en side. Jeg vurderte flere organisatoriske løsninger for å vise mine web-, skriv- og fotoprosjekter, og kom opp med dette: Jeg vil vise disse tre kategoriene som horisontalt rullende rader med miniatyrbilder.

Det var da det slo meg: "Bordceller ville være perfekte for det. Også, du kan vertikalt sentrere ting inni dem! Jeg er så smart det gjør vondt! "[Noen dramatisering her.]

Jeg har ikke gått og redesignet nettstedet mitt ennå, i stedet kodet jeg de to eksemplene på teknikken min som er i .zip-filen koblet til nederst i denne artikkelen.

Gjør det til å fungere

Så, for å gi deg en visuell, her er en Demo Jeg har jobbet opp.

Slik er hver rad merket:

Project Title

Derfra, CSS som kreves for å få det til å fungere, er enkelt nok:

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

Noen horisontale oppsettteknikker krever beholderelementet ( div.horizontal, i dette tilfellet) for å ha en definert pikselbredde lik den samlede bredden av elementene den inneholder. Andre teknikker krever visning: inline-block; Jeg er ikke en fan av denne teknikken. Med bord-celle, bare fortsett å legge til elementer når du trenger, og du er god å gå - den er perfekt for bruk med et CMS.

Gjør det fullskjerm

Ok, den andre typen horisontal layout er helskjerm horisontal layout. Å skape dette med tabellcelleegenskapen krever noe JavaScript. Jeg brukte jQuery til å fange opp ting. JS-kravet kan gjøre denne teknikken mer situasjonelt nyttig, men det er fortsatt kult.

Her er en fungerende demo.

Markeringen er lik:

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

Her er det imidlertid bare en "rad" som er laget for å passe størrelsen på nettleservinduet. Hver

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