Horizontální rozvržení všech druhů mě zaujalo od té doby, co jsem zjistil, že to dokážeš. Nevím přesně, proč jsem s nimi fascinován ... možná je to jen můj vnitřní rebel, který mluví. Bez ohledu na důvod, jsem připraven k tomu, abych prohlásil svislé posouvání zastaralé, pasé a takooo poslední tisíciletí.

Dobře, to vlastně nemám na mysli. Nicméně, s náhlým nárůstem množství dotykových obrazovek ležících kolem, je těžší tvrdit, že "nahoru a dolů" jsou naše nejlepší volby. "Vpravo a vlevo" se stávají životaschopnými směry pro umístění obsahu, pokud nejste schopni pracovat s velkým množstvím textu.

Nikdy jsem se neobtěžoval opravdu vytvářet žádné horizontální rozvržení. Technické problémy a omezení vždy převažovaly nad jakýmkoli stylistickým nebo navigačním přínosem. To však bylo dřív; a to je nyní ...

Na techniku ​​popsanou v tomto článku jsem narazil na způsob, jakým obvykle narazím na věci: snažím se udělat úplně něco jiného. Snažil jsem se (můžete se smát) vytvořit CSS mřížkový rámec založený na displeji: table-cell (v pořádku, přestane se smát).

Z důvodů, které se nyní zdá být zřejmé, nefungovalo. Pokusíte se vytvářet citlivější mřížku s vlastností tabulkové buňky. Jděte dál, počkám.

Jednoduše řečeno, buňky tabulky jsou navrženy tak, aby tvořily jeden vodorovný řádek. (Řekl jsem přestat se smát!) To je to, co dělají, a nelíbí se jim, když se pokoušíte je udělat něco jiného. Vzdal jsem se tohoto projektu. O několik týdnů později jsem však uvažoval o novém návrhu portfolia.

Myslel jsem, že by bylo hezké dát všechny své projekty na jednu stránku. Uvažoval jsem o několika organizačních řešeních pro zobrazování webových, psacích a fotografických projektů a přišel s tím: Chci zobrazit tyto tři kategorie jako horizontální posunutí řádků miniatur.

Tehdy mě to napadlo: "Buňky tabulky by byly perfektní. Také můžete ve svislém směru soustředit věci uvnitř! Jsem tak chytrý to bolí! "[Některé dramatizace zde.]

Nepřestával jsem a redesignoval můj web dosud, namísto toho jsem zakódoval dva příklady mé techniky, které jsou v souboru .zip propojeny v dolní části tohoto článku.

Dokončení práce

Takže, abych vám ukázal vizuální, je zde a demo jsem pracoval.

Zde je postup, jakým je každý řádek označen:

Project Title

Odtud potřebuje CSS, aby to fungovalo, je dost jednoduché:

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

Některé techniky horizontálního rozvržení vyžadují, aby kontejnerový prvek (v tomto případě horizontální) měl definovanou šířku pixelů, která se rovná kombinované šířce prvků, které obsahuje. Jiné techniky vyžadují zobrazení: inline-block; Nejsem fanouškem této techniky. S tabulkovými buňkami stačí přidávat prvky vždy, když to potřebujete, a máte dobré jít - je to ideální pro použití s ​​CMS.

Provedení na celou obrazovku

Dobře, jiný druh horizontálního rozvržení je horizontální rozložení na celou obrazovku. Vytvoření této vlastnosti vlastností buňky vyžaduje JavaScript. JQuery jsem použil k urychlení. Požadavek JS by mohl tuto techniku ​​situační užitečnější, ale je to stále v pohodě.

Zde je pracovní demo.

Značka je podobná:

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

Zde je však pouze jeden "řádek", který byl přizpůsoben velikosti okna prohlížeče. Každý

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