esquemas 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 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ê vê 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 próprio para coincidir com o tamanho atual janela do navegador.

Video: Tutorial de CSS, Parte1 - Criar um layout de 3 colunas

A um tipo de três colunas disposição em falta a partir deste local é uma 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.

Video: Criando Layout de 3 colunas com CSS - Aula 02

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)
Coluna conteúdo: Fixo
Coluna Esquerda: 180px
Coluna direita: 190px


Rodapé

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 documentação de ajuda, você precisa fazer algumas pequenas mudanças. O procedimento a seguir diz-lhe como.

1. Altere a propriedade margin-left para o estilo #rightcolumn para -840px.

   Esta mudança faz com que as colunas direita e esquerda mesmo.

2. Altere a propriedade largura para o estilo #rightcolumn para 180px.

   Esta mudança faz com que a direita e colunas da esquerda igual larguras.

3. Adicionar um valor de propriedade altura de 250px para ambos os estilos #leftcolumn e #rightcolumn.

   Esta alteração permite que ambas as colunas de usar metade do espaço disponível para conteúdo.

4. Adicionar um valor de propriedade margin-top de 250px ao estilo #rightcolumn.

   Esta mudança posiciona a coluna da direita abaixo da coluna da esquerda.

5. Carregar a página resultante no seu navegador.

   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.