Como usar layouts de três colunas em CSS3
layouts de três colunas em CSS3 são comumente usados em sites que fornecem uma lista de links genéricos em um lado da página, o conteúdo no meio, e links de publicidade ou de páginas específicas sobre o outro lado.
As páginas de layout Dynamic Drive mostrar um uso desta disposição, onde você verá uma lista de ofertas no painel esquerdo, os layouts reais no painel de conteúdo, e uma lista de patrocinadores no painel da direita.
Existem variações sobre o tema. Um exemplo é exibida no sítio eletrônico Frontier Foundation onde você pode ver links de sites no painel esquerdo, informações sobre FEP no painel de conteúdo e links de notícias no painel da direita.
Você pode ver uma lista dos três layouts de coluna em Biblioteca CSS. Tal como acontece com os layouts de duas colunas, você encontrar um mix de layouts fixos e fluidos quando se trabalha com os layouts de três colunas.
Claro, existem mais tipos de layouts de três colunas do que há de layouts de duas colunas porque mais permutações são possíveis. Em alguns dos esquemas, uma das colunas laterais é fluido, como é o teor de coluna. Há até mesmo um layout onde todas as três colunas são fluidos, o que significa que todo o layout irá redimensionar-se para coincidir com o tamanho atual janela do navegador.
A um tipo de disposição de três colunas em falta a partir deste local é aquela em que as duas colunas estão alinhadas, uma sobre o topo do outro. Esta forma é comumente usado para documentação on-line, como o Java 7 API.
Uma maneira de contornar este problema é a utilização de outro produto, como o plug-in layout UI para jQuery. Outra alternativa é modificar o CSS Fixo layout # 3.3- (fixo-fixo-fixo) layout.
Você não precisa fazer quaisquer alterações na peça HTML deste exemplo. A versão HTML5 do layout parecido com este. (Você pode encontrar o código completo para este exemplo na pasta Capítulo 07 da código para download como ThreeColumnHelpLayout.HTML).
CSS Fixo layout # 3.3- (fixo-fixo-fixo) CSS Fixo layout # 3.3- (fixo-fixo-fixo)
Coluna conteúdo: Fixo
Coluna Esquerda: 180px
Coluna direita: 190px
O CSS começa com o código fornecido pelo site. A fim de modificar este código para fornecer o formato necessário para a documentação de ajuda, você precisa fazer algumas pequenas mudanças. O procedimento a seguir diz-lhe como.
Altere a propriedade margin-left para o estilo #rightcolumn para -840px.
Esta alteração faz com que as colunas direita e esquerda mesmo.
Altere a propriedade de largura para o estilo #rightcolumn para 180px.
Essa mudança faz com que a direita e colunas da esquerda igual larguras.
Adicionar um valor de propriedade altura de 250px para ambos os estilos #leftcolumn e #rightcolumn.
Essa alteração permite que ambas as colunas a usar metade do espaço disponível para o conteúdo.
Adicionar um valor de propriedade margin-top de 250px para o estilo #rightcolumn.
Esta mudança posiciona a coluna da direita abaixo da coluna da esquerda.
Carregar a página resultante no seu browser.
Você vê um layout de três colunas como esta:
Os modelos Dynamic Drive são flexíveis e muitas vezes podem servir para outras finalidades, com algumas pequenas alterações. O importante é começar com um layout que parece perto do que você deseja usar.