Láréttar skipulag af öllum gerðum hefur ráðið mig frá því að ég komst að því að þú gætir gert það. Ég veit ekki nákvæmlega hvers vegna ég er heillaður af þeim ... kannski er bara innri uppreisnarmaðurinn minn að tala. Hver sem ástæðan er, ég er bara tilbúin að lýsa lóðrétta flettingu úreltur, passé og svo framvegis síðasta öld.

Allt í lagi, það er ekki í raun það sem ég meina. Enn, með skyndilegri aukningu á fjölda snertiskjáa sem liggja í kringum, verður það erfiðara að fullyrða að "upp og niður" eru bestu valkostir okkar. "Hægri og vinstri" hafa orðið raunhæfar leiðbeiningar um efnistök, svo lengi sem þú ert ekki að takast á við umtalsverða texta.

Ég nenni aldrei að virkilega byggja neinar lárétta skipanir, þó. Tæknileg vandamál og takmarkanir virtust alltaf vega þyngra en stíll eða siglingalegan ávinning þar sem það gæti verið. Það var þó áður; og þetta er nú ...

Ég komst yfir tækni sem lýst er í þessari grein á þann hátt sem ég yfirleitt rekist á hluti: með því að reyna að gera eitthvað annað algjörlega. Ég var að reyna (þú getur hlægt) til að búa til CSS rist ramma byggð á skjánum: borð-klefi (allt í lagi, hætta að hlæja núna).

Jæja, af ástæðum sem nú virðast augljósar, virkaði það ekki. Þú reynir að búa til móttækilegt myndatöflu með eigninni á töfluhólfi. Farðu á undan, ég bíður.

Einfaldlega sett eru borðfrumur hönnuð til að mynda eina, lárétta röð. (Ég sagði að hætta að hlæja!) Það er það sem þeir gera, og þeir líkar ekki við það þegar þú reynir að gera þau eitthvað annað. Ég gaf upp þetta verkefni. Nokkrum vikum síðar, þó, var ég að íhuga að endurgera eignasafn mitt aftur.

Ég hélt að það væri gaman að setja öll verkefni mína á eina síðu. Ég hugleiddi nokkrar skipulagslausnir fyrir birtingu á vefnum, ritun og ljósmyndunarverkefnum, og komst að því: Ég vil sýna þessar þrjár flokka eins og smám saman flettir raðir smámyndir.

Það er þegar það lenti á mig: "Taflafrumur myndu vera fullkomin fyrir það. Einnig er hægt að lóðrétt miðja hlutum inni í þeim! Ég er svo klár að það særir! "[Sumir dramatization hér.]

Ég hef ekki farið og endurhannað síðuna mína ennþá en ég setti í stað tvö dæmi um tækni mína sem eru í .zip-skránni sem tengist neðst á þessari grein.

Gerðu það að verki

Svo, til að gefa þér sjón, hér er a kynningu sem ég hef unnið upp.

Hér er hvernig hver röð er merktur:

Project Title

Þaðan sem CSS þarf til að vinna það er nógu einfalt:

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

Sumar láréttar skipulagðar aðferðir krefjast ílátseiningarinnar ( deiliskráða, í þessu tilviki) til að hafa skilgreindan pixlabreidd jöfn sameinuðu breidd þeirra þátta sem hún inniheldur. Aðrir aðferðir þurfa að sýna: inline-block; Ég er ekki aðdáandi af þessari tækni. Með töflufrumu skaltu bara bæta við þætti hvenær sem þú þarft, og þú ert góður að fara - það er fullkomið til notkunar með CMS.

Gerðu það í fullri skjá

Allt í lagi, hin tegund af láréttri uppsetning er heildarskjár lárétt skipulag. Ef þetta er búið til með eigu borðfruma þarf einhverja JavaScript. Ég notaði jQuery til að flýta því upp. JS krafan gæti gert þessa tækni meira situationally gagnlegur, en það er samt flott.

Hér er vinnandi kynning.

Markmiðið er svipað:

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

Hér er hins vegar aðeins ein "röð" sem hefur verið gerð til að passa stærð vafrans. 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);});