Οριζόντια σχέδια όλων των ειδών μου με ενθουσίασαν από τότε που βρήκα ότι θα μπορούσες να το κάνεις αυτό. Δεν ξέρω ακριβώς γιατί είμαι ενθουσιασμένος με αυτούς ... ίσως μόνο ο εσωτερικός επαναστάτης μου μιλάει. Όποια και αν είναι η αιτία, είμαι έτοιμος να δηλώσω την κάθετη κύλιση παρωχημένη, περασμένη, και την τελευταία χιλιετία.

Εντάξει, αυτό δεν εννοώ. Ακόμα, με την ξαφνική αύξηση του αριθμού των οθονών αφής που βρίσκονται γύρω, γίνεται πιο δύσκολο να επιβεβαιωθεί ότι "πάνω και κάτω" είναι οι καλύτερες επιλογές μας. "Δεξιά και αριστερά" έχουν γίνει βιώσιμες οδηγίες για την τοποθέτηση περιεχομένου, αρκεί να μην ασχολείσαι με σημαντικούς όγκους κειμένου.

Δεν προσπάθησα ποτέ να οικοδομήσω οριζόντια σχέδια. Τα τεχνικά προβλήματα και οι περιορισμοί πάντα φάνηκαν να αντισταθμίζουν τυχόν στυλιστικά ή πλοήγησης οφέλη που μπορεί να υπάρχουν. Αυτό ήταν πριν, ωστόσο. και αυτό είναι τώρα ...

Βρήκα την τεχνική που περιγράφεται σε αυτό το άρθρο με τον τρόπο που συνήθως συναντώ τα πράγματα: προσπαθώντας να κάνω κάτι άλλο εντελώς. Προσπάθησα (μπορείτε να γελάσετε) να δημιουργήσετε ένα πλαίσιο πλέγματος CSS βασισμένο στην οθόνη: πίνακα-κυττάρων (εντάξει, σταματήστε να γελάτε τώρα).

Λοιπόν, για λόγους που φαίνονται τώρα προφανείς, δεν λειτούργησε. Δοκιμάζετε να δημιουργήσετε ένα ανταποκρινόμενο πλέγμα εικόνας με την ιδιότητα των κυψελίδων πίνακα. Πάρε μπροστά, θα περιμένω.

Με απλά λόγια, τα κελιά του πίνακα σχεδιάζονται για να σχηματίσουν μια ενιαία, οριζόντια σειρά. (Είπα να σταματήσετε να γελάτε!) Αυτό είναι που κάνουν και δεν τους αρέσει όταν προσπαθείτε να τους κάνετε να κάνουν οτιδήποτε άλλο. Έχω εγκαταλείψει το έργο αυτό. Λίγες εβδομάδες αργότερα όμως σκέφτηκα να ξανασχεδιάσω το χαρτοφυλάκιό μου ξανά.

Νόμιζα ότι θα ήταν ωραίο να βάλω όλα τα έργα μου σε μια σελίδα. Σκέφτηκα αρκετές οργανωτικές λύσεις για την προβολή των έργων μου στο web, το γράψιμο και τη φωτογραφία και έχω καταλήξει στο εξής: θέλω να εμφανίσω αυτές τις τρεις κατηγορίες ως οριζόντια κύλιση σειρών μικρογραφιών.

Τότε το χτύπησε: "Τα κυψέλες πίνακα θα ήταν τέλεια γι 'αυτό. Επίσης, μπορείτε να κεντράρετε κατακόρυφα τα πράγματα μέσα τους! Είμαι τόσο έξυπνος που πονάει! "[Κάποια δραματοποίηση εδώ.]

Δεν έχω πάει και ξανασχεδίασα το site μου ακόμα, αντί, έχω κωδικοποιήσει τα δύο παραδείγματα της τεχνικής μου που είναι στο αρχείο .zip που συνδέονται στο κάτω μέρος αυτού του άρθρου.

Λειτουργία

Έτσι, για να σας δώσω μια οπτική, εδώ είναι α demo έχω εργαστεί.

Δείτε πώς κάθε σειρά έχει επισημανθεί:

Project Title

Από εκεί, το CSS που απαιτείται για να λειτουργήσει είναι αρκετά απλό:

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

Ορισμένες τεχνικές οριζόντιας τοποθέτησης απαιτούν το στοιχείο του δοχείου (σε αυτήν την περίπτωση διαιρέτη ) να έχει ένα καθορισμένο πλάτος εικονοστοιχείου ίσο με το συνδυασμένο πλάτος των στοιχείων που περιέχει. Άλλες τεχνικές απαιτούν εμφάνιση: inline-block; Δεν είμαι οπαδός αυτής της τεχνικής. Με το cell-cell, απλά συνεχίστε να προσθέτετε στοιχεία όποτε χρειάζεστε και είστε καλά να πάτε - είναι τέλειο για χρήση με ένα CMS.

Κάνοντας την πλήρη οθόνη

Εντάξει, το άλλο είδος οριζόντιας διάταξης είναι η οριζόντια διάταξη πλήρους οθόνης. Η δημιουργία αυτού με την ιδιότητα του πίνακα κυττάρων απαιτεί JavaScript. Χρησιμοποίησα το jQuery για να επιταχύνω τα πράγματα. Η απαίτηση JS μπορεί να κάνει αυτή την τεχνική πιο χρήσιμη από την άποψη της κατάστασης, αλλά είναι ακόμα δροσερή.

Ακολουθεί ένα δοκιμαστικό demo.

Η σήμανση είναι παρόμοια:

Full-Screen Horizontal Layouts
Made with display: table-cell;
  Από τον Ezequiel Bruni 

Εδώ, ωστόσο, είναι μόνο μία "σειρά" που έχει κατασκευαστεί για να ταιριάζει στο μέγεθος του παραθύρου του προγράμματος περιήγησης. Καθε

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