CSS3 layout de colunas múltiplas

Usando CSS3onde você pode dividir o conteúdo de texto do elemento em várias colunas.

Criar layout de colunas múltiplas

CSS3Foi introduzido o módulo de layout de colunas múltiplas, que permite criar layouts de colunas múltiplas de maneira simples e eficaz. Agora, você pode criar layouts sem usar caixas flutuantes, como os vistos em revistas e jornais. Este é um exemplo de uso do CSS3Um exemplo simples de layout de colunas múltiplas, dividindo alguns textos em três colunas.

p {
　　　　-webkit-column-count:　3;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-count:　3;　/*　Firefox　*/
　　　　　　　　　　　　column-count:　3;　
}

define o número de colunas ou a largura

propriedade CSS, column-count e column-width especifica se e quantas colunas serão exibidas. column-count define o número de colunas dentro do elemento multicol, enquanto column-A propriedade width define a largura necessária da coluna.

p {
　　　　-webkit-column-width:　150px;　/*　Chrome, Safari, Opera　*/
　　　　　　　-moz-column-width:　150px;　/*　Firefox　*/
　　　　　　　　　　　　column-width:　150px;　
}

para definir o espaçamento da coluna

Você pode usar a propriedade column-A propriedade gap especifica o espaçamento entre as colunas. A mesma distância é aplicada entre cada coluna. O espaçamento padrão é normal, que é igual a1em.

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
}

para definir a regra da coluna

Você também pode usar column-A propriedade rule adiciona uma linha entre as colunas, chamada de regra. É um atalho abreviado usado para definir a largura, estilo e cor da regra em uma única declaração. A propriedade column-A propriedade rule usa os mesmos valores que border e outline.

p {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-column-count:　3;
　　　　-webkit-column-gap:　100px;
　　　　-webkit-column-rule:　2px sólido vermelho;
　　　　/*　Firefox　*/
　　　　-moz-column-count:　3;
　　　　-moz-column-gap:　100px;
　　　　-moz-column-rule:　2px sólido vermelho;
　　　　
　　　　column-count:　3;
　　　　column-gap:　100px;
　　　　column-rule:　2px sólido vermelho;
}

CSS3Propriedades Multicolunas

A tabela a seguir resume brevemente todas as propriedades multicolunas: