Layouts horizontais de todos os tipos me intrigaram desde que descobri que você poderia fazer isso. Eu não sei exatamente porque eu sou fascinado por eles ... talvez seja apenas o meu rebelde interior falando. Seja qual for o motivo, estou quase pronto para declarar a rolagem vertical obsoleta, ultrapassada e muuuito no último milênio.

Ok, isso não é realmente o que quero dizer. Ainda assim, com o súbito aumento na quantidade de telas sensíveis ao toque, torna-se mais difícil afirmar que “para cima e para baixo” são nossas melhores opções. "Direita e esquerda" tornaram-se direções viáveis ​​para colocação de conteúdo, contanto que você não esteja lidando com volumes substanciais de texto.

Eu nunca me preocupei em realmente construir qualquer layout horizontal, no entanto. Os problemas técnicos e as limitações pareciam sempre superar os benefícios estilísticos ou de navegação que poderiam existir. Isso foi antes, no entanto; e isso é agora ...

Eu me deparei com a técnica descrita neste artigo do jeito que eu costumo me deparar com as coisas: tentando fazer algo completamente diferente. Eu estava tentando (você pode rir) criar um framework de grade CSS baseado em display: table-cell (ok, pare de rir agora).

Bem, por razões que agora parecem óbvias, não funcionou. Você tenta criar uma grade de imagem responsiva com a propriedade da célula da tabela. Vá em frente, vou esperar.

Simplificando, as células da tabela são projetadas para formar uma única linha horizontal. (Eu disse para de rir!) É o que eles fazem, e eles não gostam quando você tenta fazê-los fazer qualquer outra coisa. Eu desisti desse projeto. Algumas semanas mais tarde, porém, eu estava pensando em redesenhar meu portfólio novamente.

Eu pensei que seria legal colocar todos os meus projetos em uma única página. Considerei várias soluções organizacionais para exibir meus projetos de web, redação e fotografia, e descobri o seguinte: Quero exibir essas três categorias como linhas de rolagem horizontais de miniaturas.

Foi quando me ocorreu: “As células da mesa seriam perfeitas para isso. Além disso, você pode centralizar verticalmente as coisas dentro deles! Eu sou tão esperto que dói! ”[Alguns dramatização aqui.]

Eu não fui e redesenhei meu site ainda, em vez disso, eu codifiquei os dois exemplos de minha técnica que estão no arquivo .zip vinculado na parte inferior deste artigo.

Fazendo funcionar

Então, para te dar um visual, aqui está um demo eu trabalhei.

Veja como cada linha é marcada:

Project Title

A partir daí, o CSS necessário para fazê-lo funcionar é bastante simples:

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

Algumas técnicas de layout horizontal exigem que o elemento contêiner ( div.horizontal, nesse caso) tenha uma largura de pixel definida igual à largura combinada dos elementos que ele contém. Outras técnicas exigem exibição: inline-block; Eu não sou fã dessa técnica. Com a célula da tabela, continue adicionando elementos sempre que precisar, e você está pronto para ir - é perfeito para uso com um CMS.

Fazendo isso em tela cheia

Ok, o outro tipo de layout horizontal é o layout horizontal em tela cheia. Criar isso com a propriedade da célula da tabela requer algum JavaScript. Eu usei o jQuery para acelerar as coisas. O requisito de JS pode tornar essa técnica mais útil em termos de situação, mas ainda é legal.

Aqui está uma demonstração de trabalho.

A marcação é semelhante:

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

Aqui, no entanto, é apenas uma "linha" que foi feita para se ajustar ao tamanho da janela do 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);});