Horisontale layouter af alle slags har fascineret mig lige siden jeg fandt ud af at du kunne gøre det. Jeg ved ikke præcis, hvorfor jeg er fascineret af dem ... måske er det bare min indre rebel tale. Uanset årsagen er jeg bare klar til at erklære vertikal rullende forældet, passé og også i det sidste årtusind.

Okay, det er ikke rigtig hvad jeg mener. Men med den pludselige stigning i mængden af ​​berøringsskærme liggende rundt, bliver det sværere at hævde, at "op og ned" er vores bedste muligheder. "Højre og venstre" er blevet bæredygtige retninger for indholdsplacering, så længe du ikke beskæftiger dig med betydelige mængder tekst.

Jeg har aldrig gidet at virkelig bygge nogle vandrette layouter, selvom. De tekniske problemer og begrænsninger syntes altid at opveje eventuelle stil- eller navigationsfordele der måtte være. Det var dog før; og det er nu

Jeg kom på tværs af den teknik, der beskrives i denne artikel, som jeg normalt kommer på tværs af ting: ved at forsøge at gøre noget helt andet. Jeg forsøgte (du kan grine) for at oprette en CSS grid ramme baseret på display: bordcelle (okay, stop med at grine nu).

Godt af grunde, der nu ser ud til at være indlysende, fungerede det ikke. Du forsøger at lave et lydhurt billedgitter med tabellen celleegenskab. Gå videre, jeg venter.

Enkelt sagt er bordceller designet til at danne en enkelt, vandret række. (Jeg sagde stop med at grine!) Det er det, de gør, og de kan ikke lide det, når du forsøger at få dem til at gøre noget andet. Jeg opgav dette projekt. Et par uger senere overvejede jeg dog at genopbygge min portefølje igen.

Jeg troede det ville være rart at sætte alle mine projekter på en side. Jeg overvejede adskillige organisatoriske løsninger til at vise mine web-, skrivnings- og fotoprojekter og kom op med dette: Jeg vil vise disse tre kategorier som vandret rullende rækker miniaturer.

Det var da det ramte mig: "Bordceller ville være perfekte til det. Du kan også vertikalt centrere tingene inde i dem! Jeg er så smart, det gør ondt! "[Nogle dramatisering her.]

Jeg er ikke gået og redesignet mit websted endnu, i stedet kodede jeg de to eksempler på min teknik, der er i .zip-filen, der er linket til nederst i denne artikel.

Gør det arbejde

Så for at give dig en visuel, her er en Demo Jeg har arbejdet op.

Sådan er hver række markeret:

Project Title

Derfra er CSS forpligtet til at gøre det arbejde simpelt 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;}

Nogle horisontale layoutteknikker kræver beholderelementet ( div.horizontal, i dette tilfælde) for at have en defineret pixelbredde, der svarer til den samlede bredde af de elementer, den indeholder. Andre teknikker kræver visning: inline-block; Jeg er ikke fan af denne teknik. Med bordcelle skal du bare tilføje elementer, når du har brug for det, og du er god at gå - den er perfekt til brug med et CMS.

Gør det fuldskærm

Okay, den anden form for vandret layout er fuldskærmens vandrette layout. Oprettelse af dette med celleegenskaben kræver nogle JavaScript. Jeg brugte jQuery til at fremskynde tingene. JS-kravet kan gøre denne teknik mere situationally nyttig, men det er stadig cool.

Her er en fungerende demo.

Markeringen er ens:

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

Her er det dog kun en "række", der er lavet til at passe størrelsen af ​​browservinduet. 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);});