Układy poziome wszelkiego rodzaju intrygowały mnie odkąd odkryłem, że możesz to zrobić. Nie wiem dokładnie, dlaczego jestem nimi zafascynowany ... może to tylko mój wewnętrzny buntownik. Bez względu na przyczynę, jestem gotowy zadeklarować przewijanie w pionie przestarzałe, ostatnie i ostatnie tysiąclecie.

Okay, nie to naprawdę mam na myśli. Mimo to, wraz z nagłym wzrostem liczby ekranów dotykowych leżących wokół, staje się trudniejsze do stwierdzenia, że ​​"góra i dół" to nasze najlepsze opcje. "Prawo i lewo" stały się realnymi wskazówkami dotyczącymi umieszczania treści, o ile nie zajmujesz się znacznymi wolumenami tekstu.

Nigdy jednak nie zawracałem sobie głowy budowaniem układów poziomych. Problemy techniczne i ograniczenia zawsze zdawały się przeważać nad ewentualnymi korzyściami stylistycznymi lub nawigacyjnymi. To było jednak wcześniej; i to jest teraz ...

Zetknąłem się z techniką opisaną w tym artykule, tak jak zwykle napotykam rzeczy: próbując zrobić coś zupełnie innego. Próbowałem (możesz się śmiać) stworzyć szkielet CSS oparty na wyświetlaczu: table-cell (okej, przestań się śmiać).

Cóż, z powodów, które teraz wydają się oczywiste, nie zadziałało. Próbujesz utworzyć siatkę reagujących obrazów z właściwością tabela-komórka. Dalej, poczekam.

Mówiąc najprościej, komórki tabeli są zaprojektowane tak, aby tworzyły pojedynczy, poziomy rząd. (Powiedziałem, przestańcie się śmiać!) To właśnie robią i nie podoba im się, kiedy próbujecie zrobić coś innego. Zrezygnowałem z tego projektu. Kilka tygodni później rozważałem ponowne przeprojektowanie mojego portfolio.

Pomyślałem, że byłoby miło umieścić wszystkie moje projekty na jednej stronie. Rozważyłem kilka rozwiązań organizacyjnych służących do wyświetlania moich projektów internetowych, pisanych i fotograficznych, i wymyśliłem: chcę wyświetlać te trzy kategorie jako przewijające się w poziomie wiersze miniatur.

Wtedy mnie uderzyło: "Komórki na stole byłyby idealne do tego. Możesz także w pionie wyśrodkowywać obiekty wewnątrz nich! Jestem taki mądry, że to boli! "[Trochę dramatyzmu tutaj.]

Nie przeszedłem jeszcze przeprojektowania mojej strony, zamiast tego zakodowałem dwa przykłady mojej techniki, które znajdują się w pliku .zip, do którego link znajduje się na końcu tego artykułu.

Sprawia, że ​​działa

Tak więc, aby dać ci obraz, oto wersja demo, nad którą pracowałem.

Oto sposób oznaczania każdego wiersza:

Project Title

Stamtąd kod CSS wymagany do jego działania jest dość prosty:

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

Niektóre techniki układania w poziomie wymagają, aby element kontenera ( div.horizontal, w tym przypadku) miał zdefiniowaną szerokość piksela równą łącznej szerokości zawartych w nim elementów. Inne techniki wymagają wyświetlania: blok inline; Nie jestem fanem tej techniki. W przypadku komórki tabeli, po prostu dodawaj elementy, kiedy tylko potrzebujesz, i jesteś gotowy do pracy - jest idealny do użycia z CMS.

Zrób to na pełnym ekranie

Okay, innym rodzajem układu poziomego jest układ poziomy w układzie pełnoekranowym. Utworzenie tego za pomocą właściwości komórki tabeli wymaga trochę JavaScript. Użyłem jQuery, aby przyspieszyć działanie. Wymóg JS może sprawić, że ta technika będzie bardziej przydatna w sytuacji, ale nadal jest fajna.

Oto działająca wersja demonstracyjna.

Znacznik jest podobny:

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

Tutaj jednak jest to tylko jeden "wiersz", który został dopasowany do rozmiaru okna przeglądarki. Każdy

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