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 de 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 de jornal onde o conteúdo flui de coluna-a-coluna com base no configuração do navegador do usuário.

Como com qualquer coisa CSS3 específicos de, você precisa testar seu aplicativo com os browsers 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.

Enquanto o Internet Explorer e Opera suportam 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 redimensionar a janela de navegador (ou o navegador exibirá uma barra de deslocamento horizontal para permitir a rolar ao longo das colunas quando uma largura específica é definida como bem).

• coluna-fill: Determina como o navegador preenche as colunas (ou preenchendo uma coluna de cada vez ou preenchendo todas as colunas simultaneamente com uma quantidade ainda de conteúdo).

• column-gap: cria uma lacuna entre as colunas para torná-lo mais fácil de determinar onde uma coluna termina e outro começa.

• coluna da 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.

• -Column-regra de 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-width: Determina a largura da regra utilizada entre as colunas.

• coluna-span: Especifica o número de colunas que um objeto pode atingir.

• column-width: Especifica a largura da coluna.

• colunas: Fornece um método taquigráfico para definir a coluna de contagem e as propriedades da 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 HTML5 com o seu editor de texto.

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

   Criando um Layout de jornal
   Lorem ipsum dolor sit amet, elit consectetueradipiscing, 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 o seu editor de texto.

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

   #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 cria um estilo que inclui três colunas, com uma regra 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.

   Você vê um formato de estilo 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 que você precisa é de alguns estilos simples.