Los diseños horizontales de todo tipo me han intrigado desde que descubrí que podías hacer eso. No sé exactamente por qué estoy fascinado con ellos ... tal vez sea solo mi conversación interna rebelde. Cualquiera que sea el motivo, estoy a punto de declarar que el desplazamiento vertical es obsoleto, pasado de moda y, desde luego, el último milenio.

De acuerdo, eso no es realmente lo que quiero decir. Sin embargo, con el aumento repentino en la cantidad de pantallas táctiles que se encuentran, cada vez es más difícil afirmar que "subir y bajar" son nuestras mejores opciones. "Derecha e izquierda" se han convertido en instrucciones viables para la ubicación del contenido, siempre y cuando no se ocupe de volúmenes sustanciales de texto.

Sin embargo, nunca me molesté en construir diseños horizontales. Los problemas técnicos y las limitaciones siempre parecían superar cualquier beneficio estilístico o de navegación que pudiera haber. Eso fue antes, sin embargo; y esto es ahora ...

Me encontré con la técnica descrita en este artículo de la manera en que generalmente me encuentro con las cosas: al tratar de hacer algo completamente distinto. Estaba intentando (puedes reír) crear un marco de grillas CSS basado en la visualización: table-cell (vale, deja de reírte ahora).

Bueno, por razones que ahora parecen obvias, no funcionó. Intenta hacer una cuadrícula de imagen receptiva con la propiedad de celda de tabla. Adelante, esperaré.

En pocas palabras, las celdas de la tabla están diseñadas para formar una única fila horizontal. (¡Dije que dejen de reír!) Eso es lo que hacen, y no les gusta cuando tratas de hacer que hagan cualquier otra cosa. Me rendí en ese proyecto. Unas semanas más tarde, sin embargo, estaba considerando rediseñar mi cartera de nuevo.

Pensé que sería bueno poner todos mis proyectos en una página. Consideré varias soluciones organizativas para mostrar mis proyectos de web, escritura y fotografía, y se me ocurrió esto: quiero mostrar estas tres categorías como filas de miniaturas de desplazamiento horizontal.

Fue entonces cuando me di cuenta: "Las celdas de la mesa serían perfectas para eso. ¡Además, puedes centrar verticalmente cosas dentro de ellos! ¡Soy tan inteligente que duele! "[Algunas dramatizaciones aquí.]

No he ido y rediseñado mi sitio todavía, en su lugar, codifiqué los dos ejemplos de mi técnica que se encuentran en el archivo .zip vinculado al final de este artículo.

Hacer que funcione

Entonces, para darle una visión, aquí hay una demo que he trabajado.

Así es como se marca cada fila:

Project Title

A partir de ahí, el CSS requerido para hacerlo funcionar es bastante 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;}

Algunas técnicas de disposición horizontal requieren que el elemento contenedor ( div.horizontal, en este caso) tenga un ancho de píxel definido igual al ancho combinado de los elementos que contiene. Otras técnicas requieren visualización: bloque en línea; No soy un fan de esta técnica. Con Table-Cell, simplemente siga agregando elementos cuando lo necesite, y estará listo para usar, es perfecto para usar con un CMS.

Haciéndolo a pantalla completa

De acuerdo, el otro tipo de disposición horizontal es el diseño horizontal de pantalla completa. Crear esto con la propiedad de celda de tabla requiere algo de JavaScript. Usé jQuery para acelerar las cosas. El requisito de JS puede hacer que esta técnica sea más útil desde el punto de vista de la situación, pero aún así es genial.

Aquí hay una demostración funcional.

El marcado es similar:

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

Aquí, sin embargo, solo se ha creado una "fila" para ajustarse al tamaño de la ventana del navegador. Cada

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