Les dispositions horizontales de toutes sortes m'ont intrigué depuis que j'ai découvert que vous pouviez le faire. Je ne sais pas exactement pourquoi je suis fasciné par eux ... peut-être que ce n'est que ma conversation intérieure rebelle. Quelle que soit la raison, je suis sur le point de déclarer que le défilement vertical est obsolète, dépassé et trop récent.

Ok, ce n'est pas vraiment ce que je veux dire. Cependant, avec l'augmentation soudaine de la quantité d'écrans tactiles qui traînent, il devient plus difficile d'affirmer que «haut et bas» sont nos meilleures options. "Right and left" sont devenus des orientations viables pour le placement de contenu, à condition de ne pas traiter de gros volumes de texte.

Je n'ai jamais pris la peine de vraiment construire des mises en page horizontales. Les problèmes techniques et les limitations semblaient toujours l'emporter sur tous les avantages stylistiques ou de navigation. C'était avant, cependant; et c'est maintenant ...

Je suis tombé sur la technique décrite dans cet article de la façon dont je rencontre habituellement les choses: en essayant de faire autre chose entièrement. Je tentais (vous pouvez rire) de créer un cadre de grille CSS basé sur l'affichage: table-cell (d'accord, arrêtez de rire maintenant).

Eh bien, pour des raisons qui semblent maintenant évidentes, cela n'a pas fonctionné. Vous essayez de créer une grille d'image réactive avec la propriété table-cell. Allez-y, j'attendrai.

En termes simples, les cellules de tableau sont conçues pour former une seule ligne horizontale. (J'ai dit arrête de rire!) C'est ce qu'ils font, et ils n'aiment pas quand ils essaient de leur faire faire autre chose. J'ai abandonné ce projet. Quelques semaines plus tard, cependant, j'envisageais de refaire mon portefeuille.

Je pensais que ce serait bien de mettre tous mes projets sur une seule page. J'ai envisagé plusieurs solutions organisationnelles pour l'affichage de mes projets Web, d'écriture et de photographie et j'ai proposé ceci: Je veux afficher ces trois catégories comme des rangées de vignettes défilant horizontalement.

C'est quand ça m'a frappé: "Les cellules de la table seraient parfaites pour ça. En outre, vous pouvez centrer verticalement les choses à l'intérieur! Je suis si intelligent que ça fait mal! "[Quelques dramatisations ici.]

Je n'ai pas encore modifié mon site, mais j'ai plutôt codé les deux exemples de ma technique qui se trouvent dans le fichier .zip lié au bas de cet article.

Le faire fonctionner

Donc, pour vous donner un visuel, voici un démo j'ai travaillé.

Voici comment chaque ligne est marquée:

Project Title

A partir de là, le CSS requis pour le faire fonctionner est assez simple:

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

Certaines techniques de disposition horizontale exigent que l'élément conteneur ( div.horizontal, dans ce cas) ait une largeur de pixel définie égale à la largeur combinée des éléments qu'il contient. D'autres techniques nécessitent un affichage: inline-block; Je ne suis pas fan de cette technique. Avec la table-cell, continuez à ajouter des éléments quand vous en avez besoin, et vous êtes prêt à aller - c'est parfait pour une utilisation avec un CMS.

Le rendre plein écran

Ok, l'autre type de disposition horizontale est la disposition horizontale plein écran. La création de cette propriété avec la propriété table-cell nécessite du JavaScript. J'ai utilisé jQuery pour accélérer les choses. L'exigence JS pourrait rendre cette technique plus utile du point de vue de la situation, mais elle reste cool.

Voici une démo de travail.

Le balisage est similaire:

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

Ici, cependant, il n'y a qu'une seule "ligne" qui a été créée pour s'adapter à la taille de la fenêtre du navigateur. Chaque

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