CSS3 proporciona um novo método para trabalhar com colunas que não exigem que você tenha um grau de matemática e realizar configurações de teste com estilos arcanos.

Os estilos de coluna fornecer os meios para criar várias colunas em uma página sem muito esforço de sua parte. Dependendo do estilo específico que você usar, você pode obter vários layouts ou simplesmente criar uma configuração do tipo jornal onde o conteúdo flui de coluna-a-coluna baseada em configuração do navegador do usuário.

Como com qualquer coisa CSS3 específicos de, você precisa testar sua aplicação com os navegadores que os usuários pretendem usar. Além disso, esse recurso é considerado experimental - e você tem que saltar através de algumas aros para fazê-lo funcionar com alguns navegadores.

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

Enquanto o Internet Explorer e Opera apoiar as propriedades da coluna diretamente, você deve preceder -moz- para fazê-los funcionar com o Firefox e -webkit- para fazê-los funcionar com o Safari e Chrome. A lista a seguir fornece uma visão geral das propriedades da coluna.

• column-count: Especifica o número de colunas para criar. A largura das colunas varia automaticamente como o usuário redimensiona a janela do navegador (ou o navegador exibe uma barra de rolagem horizontal para torná-lo possível para se deslocar ao longo das colunas quando uma largura específica é definida como bem).

• coluna de enchimento: Determina como o navegador enche as colunas (ou enchendo uma coluna de cada vez ou enchendo todas as colunas simultaneamente com uma quantidade ainda de conteúdo).

• coluna de lacuna: cria uma lacuna entre as colunas para torná-lo mais fácil de determinar em que uma coluna termina e começa outra.

• column-regra: Cria uma regra entre as colunas de modo que o usuário pode ver um separador físico. Esta propriedade consiste em cor, estilo e largura.

• -Coluna-regra cor: Determina com a cor da regra utilizada entre as colunas.

• coluna da regra de estilo: Determina o estilo da regra utilizada entre as colunas.

• coluna da regra de largura: determina a largura da regra utilizada entre as colunas.

• coluna do vão: Especifica o número de colunas que um objecto pode abrangem.

• coluna de largura: Especifica um largura da coluna.

• colunas: Fornece um método abreviado para definir tanto a coluna de contagem e propriedades coluna de largura.

Uma das maneiras mais fáceis de começar a experimentar com colunas é criar algum conteúdo e, em seguida, usar um layout de estilo jornal para apresentá-lo. O procedimento a seguir ajuda a criar um layout de múltiplos jornal coluna para algum texto fictício.

1. 
   
   
   

   Criar um novo arquivo de HTML5 com seu editor de texto.

2. Digite o seguinte código para a página HTML.

   Criando um Layout jornal
   Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam eratvolutpat. Ut wisi enim ad minim veniam, quisnostrud exerci ullamcorper tação suscipitlobortis NISL ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor em hendreritin vulputate velit Esse molestie consequat, velillum dolore eu feugiat nulla facilisis em veroeros et accumsan et iusto odio dignissim quiblandit Praesent luptatum zzril delenit augueduis dolore te feugait nulla facilisi. Nam libertempor cum Soluta nobis eleifend opção conguenihil imperdiet doming id quod mazim placeratfacer assum possim. TYPI não habent claritateminsitam- est usus legentis no IIS qui facit eorumclaritatem. Investigationes demonstraveruntlectores me legere lius quod ii Saepius legunt.

   Tudo que você tem aqui é um título eo parágrafo. O parágrafo contém o texto fictício usado para conteúdo no layout jornal.

   Se você está se perguntando o Lorem ipsum é tudo, você pode ler mais em Lorem Ipsum. Na verdade, o site fornece um gerador de texto fictício que não vai distrair a atenção do espectador de um esquema subjacente ou outra consideração técnica.

3. Salve o arquivo como NewspaperLayout.HTML.

4. Criar um novo arquivo CSS com seu editor de texto.

   Video: Trabalhando com colunas CSS3

5. Digite o seguinte informações de estilo CSS.

   Video: Trabalhando com colunas - CSS 3

   #text {column-count: 3 colunas-regra: 4px cume azul-column-gap: 20px; -moz-column-count: 3 - moz-column-regra: 4px cume azul - moz-column-gap: 20px; -webkit-column-count: 3 - webkit-column-regra: 4px cume azul - webkit-column-gap: 20px;}

   O exemplo que se cria um modelo que inclui três colunas, com uma regra de azul entre as colunas. Claro, você precisa repetir os estilos três vezes - uma vez para cada um dos requisitos do navegador.

6. Salve o arquivo como NewspaperLayout.CSS.

7. Carregar o exemplo NewspaperLayout.

   Video: CSS3 - Aula 13 - Margens e centralização

   Você vê um formato de estilo de jornal. Este formato será mais fácil de ler quando você trabalha com um monte de texto em um site. No passado, você teria que trabalhar muito duro para conseguir um layout tão agradável como este, mas agora tudo o que você precisa é de alguns estilos simples.