Kaikenlaiset horisontaaliset asettelut ovat kiehtoneet minua siitä lähtien, kun sain selville, että voisit tehdä sen. En tiedä tarkalleen, miksi olen kiehtonut heistä ... ehkä se on vain sisäinen kapinallinen keskustelu. Riippumatta siitä, mistä syystä olen valmis julistamaan pystysuorat vieritys vanhentuneiksi, passeksi ja viime vuosituhanneksi.

Okei, se ei ole oikeastaan ​​mitä tarkoitan. Silti, kun kosketusnäyttöjen määrä kasvaa äkillisesti, on vaikeampaa väittää, että "ylös ja alas" ovat parhaita vaihtoehtoja. "Oikea ja vasen" ovat muuttuneet elinkelpoisiksi sisällön sijoitteluiksi, kunhan et ole tekemisissä huomattavan paljon tekstiä.

En ole koskaan vaivaa rakentaa todella horisontaalisia asetteluja. Tekniset ongelmat ja rajoitukset näyttivät aina olevan suurempia kuin mitä tahansa tyylisillä tai navigointimahdollisuuksilla saattaa olla. Se oli kuitenkin aiemmin; ja tämä on nyt ...

Tulin tässä artikkelissa kuvatun tekniikan tapaan tavallisesti kohtaamaan asioita: yrittäen tehdä jotain muuta kokonaan. Yritin (voit nauraa) luoda CSS-ruudukon kehyksen näyttöön perustuen: taulukko-solu (okei, lopeta nyt nauraa).

No, nyt näkyvistä syistä se ei toiminut. Yrität tehdä reagoivan kuvaviivan taulukon soluominaisuuden avulla. Aion odottaa.

Yksinkertaisesti sanottuna taulukon solut on suunniteltu muodostamaan yksittäinen vaakasuora rivi. (Sanoin lopeta nauraa!) Niin he tekevät, eivätkä he pidä siitä, kun yrität tehdä heistä jotain muuta. Annoin tuon projektin. Kuitenkin muutamia viikkoja myöhemmin harkitsin uudelleen portfolion uudistamista.

Mielestäni olisi hyvä laittaa kaikki hankkeet yhdelle sivulle. Pohdin useita organisatorisia ratkaisuja verkko-, kirjoitus- ja valokuvaushankkeiden näyttämiseksi ja tulivat siihen: Haluan näyttää nämä kolme ryhmää vaakasuorassa rullina pikkukuvien riveinä.

Silloin se osui minulle: "Taulukon solut olisivat täydellisiä tähän. Voit myös pystyttää keskitetysti asioita niihin! Olen niin älykäs, että se sattuu! "[Jotkut dramaattisuus täällä.]

En ole mennyt ja suunnitellut uudelleen sivustoni, mutta koodasin kaksi esimerkkiä tekniikastani, jotka ovat .zip-tiedostossa, joka on linkitetty tämän artikkelin alaosaan.

Tehdä se toimimaan

Joten, jotta annan sinulle visuaalisen, tässä on a demo Olen työskennellyt.

Näin jokainen rivi on merkitty:

Project Title

Sieltä CSS, joka tarvitaan sen tekemiseen, on yksinkertainen:

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

Jotkin horisontaaliset asettelutekniikat edellyttävät, että säiliöelementti ( div.horizontal, tässä tapauksessa) on määritelty pikselin leveys, joka vastaa sen sisältämien elementtien yhdistettyä leveyttä. Muut tekniikat vaativat näyttöä: inline-block; En ole fani tätä tekniikkaa. Pöytäkennolla pitää vain lisätä elementtejä aina kun tarvitset, ja olet hyvä mennä - se on täydellinen käytettäväksi CMS: n kanssa.

Tehdään koko näytöllä

Okei, muut horisontaaliset asettelut ovat koko näytön vaakasuuntainen asettelu. Tämän luominen taulukko-soluominaisuudella edellyttää joitakin JavaScript-toimintoja. Käytin jQueryä nopeuttamaan asioita. JS: n vaatimus saattaa tehdä tästä tekniikasta tilapäisesti hyödyllisemmän, mutta se on silti hieno.

Tässä on toimiva demo.

Merkintä on samanlainen:

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

Tässä kuitenkin se on vain yksi "rivi", joka on tehty selaimen ikkunan koon mukaan. kukin

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