CSS3 multi-coluna
CSS3 conteúdo de texto pode ser concebido como uma disposição de multi-coluna de jornal, os seguintes exemplos:
Este tutorial - a ciência não é apenas tecnologia, mas também um sonho! Este tutorial (www.w3big.com) fornece o tutorial baseado na tecnologia de programação mais completa introduz os conceitos básicos de HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL e outras linguagens de programação. Mas o site também fornece uma série de exemplos on-line, a título de exemplo, você pode aprender melhor programação.
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão do método.
Imediatamente após o número -webkit- navegador ou prefixo -moz- especificado.
| propriedade | |||||
|---|---|---|---|---|---|
| coluna de contagem | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| column-gap | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| coluna da regra | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| coluna da regra-color | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| coluna da regra de estilo | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| coluna da regra de largura | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
| coluna de largura | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15,0 -webkit 11.1 |
CSS3 propriedades multi-coluna
Neste capítulo, vamos aprender mais algumas propriedades da coluna de CSS3:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 para criar várias colunas
column-count atributo especifica o número de colunas necessário dividir.
O elemento de exemplo a seguir <div> no texto é dividido em três:
Exemplos
-webkit-column-count: 3; / * Chrome, Safari, Opera * /
-moz-column-count: 3; / * Firefox * /
column-count: 3;
}
tente »
lacuna de várias colunas CSS3 entre as colunas e colunas
column-gap propriedade especifica a diferença entre as colunas e colunas.
O exemplo a seguir especifica a diferença entre a coluna ea coluna é de 40 pixels:
Exemplos
-webkit-column-gap: 40px; / * Chrome, Safari, Opera * /
-moz-column-gap: 40px; / * Firefox * /
column-gap: 40px;
}
tente »
fronteiras colunas CSS3
column-rule-style propriedade especifica as colunas estilo fronteira entre colunas:
Exemplos
-webkit-coluna da regra de estilo: sólida; / * Chrome, Safari, Opera * /
-moz-column-regra de estilo: sólida; / * Firefox * /
coluna da regra de estilo: sólida;
}
tente »
column-rule-width atributo especifica a espessura da borda dos dois:
Exemplos
--webkit-Coluna regra-width: 1px; / * Chrome, Safari, Opera * /
--moz-Column regra-width: 1px; / * Firefox * /
coluna da regra-width: 1px;
}
tente »
column-rule-color atributo especifica a cor da borda dos dois:
Exemplos
-webkit-coluna-rule-color: lightblue; / * Chrome, Safari, Opera * /
-moz-column-rule-color: lightblue; / * Firefox * /
coluna da regra-color: lightblue;
}
tente »
column-rule propriedade é uma abreviação para todas as propriedades da coluna-rule- *.
O exemplo a seguir define a coluna diretamente para a espessura da borda, cor e estilo:
Exemplos
-webkit-column-regra: 1px solid lightblue; / * Chrome, Safari, Opera * /
-moz-column-regra: 1px solid lightblue; / * Firefox * /
coluna da regra: 1px solid lightblue;
}
tente »
Quantas colunas em todo o elemento especificado
O exemplo a seguir especifica o <h2> elemento em todas as colunas:
Exemplos
-webkit-coluna-span: todos; / * Chrome, Safari, Opera * /
coluna-span: todos;
}
tente »
Especifica a largura das colunas
column-width atributo especifica a largura da coluna.
Exemplos
-webkit-column-width: 100px; / * Chrome, Safari, Opera * /
column-width: 100px;
}
tente »
CSS3 propriedades multi-coluna
A tabela a seguir lista todos os atributos de CSS3 multi-coluna:
| propriedade | descrição |
|---|---|
| coluna de contagem | O número de colunas elemento especificado deve ser dividida. |
| coluna de enchimento | Especifica como preencher colunas |
| column-gap | Especifica a diferença entre as colunas e colunas |
| coluna da regra | All * propriedade estenográfica coluna rule- |
| coluna da regra-color | Especifica a cor da fronteira entre os dois |
| coluna da regra de estilo | Especificar o estilo da fronteira entre os dois |
| coluna da regra de largura | Especifica a espessura da fronteira entre os dois |
| coluna-span | Especifica quantas colunas para atravessar elemento |
| coluna de largura | Especifica a largura das colunas |
| colunas | Definir coluna de largura e taquigrafia column-count |