CSS3 Multi-coluna layout
O layout CSS3 multi-coluna permite fácil definição de várias colunas de texto - assim como em jornais:
diário Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit- ou -moz- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Propriedades CSS3 Multi-coluna
Neste capítulo, você vai aprender sobre as seguintes propriedades de várias colunas:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 criar várias colunas
A column-count propriedade especifica o número de colunas de um elemento deverá ser dividido em.
O exemplo a seguir irá dividir o texto no <div> elemento em 3 colunas:
Exemplo
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Tente você mesmo " CSS3 Especifique o Gap entre colunas
A column-gap propriedade especifica a diferença entre as colunas.
O exemplo a seguir especifica uma lacuna de 40 pixels entre as colunas:
Exemplo
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Tente você mesmo " Regras Coluna CSS3
A column-rule-style propriedade especifica o estilo da regra entre colunas:
Exemplo
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Tente você mesmo " A column-rule-width propriedade especifica a largura da regra entre colunas:
Exemplo
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Tente você mesmo " A column-rule-color propriedade especifica a cor da regra entre colunas:
Exemplo
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Tente você mesmo " A column-rule propriedade é um atalho para definir todas as propriedades da coluna-rule- * acima.
O exemplo a seguir define a largura, estilo e cor da regra entre colunas:
Exemplo
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Tente você mesmo " Especificar quantas colunas de um elemento deve Span
A column-span propriedade especifica quantas colunas um elemento deve abranger toda.
O exemplo a seguir especifica que o <h2> elemento deve abranger entre todas as colunas:
Exemplo
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Tente você mesmo " Especifique a largura da coluna
A column-width propriedade especifica, uma largura ideal sugerido para as colunas.
O exemplo a seguir especifica que o sugeriu, a largura ideal para as colunas deve ser 100px:
Exemplo
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Tente você mesmo " Propriedades CSS3 Multi-colunas
A tabela a seguir lista todas as propriedades multi-colunas:
| Propriedade | Descrição |
|---|---|
| column-count | Especifica o número de colunas de um elemento deverá ser dividido em |
| column-fill | Especifica como preencher colunas |
| column-gap | Especifica a diferença entre as colunas |
| column-rule | Um atalho para definir todas as propriedades da coluna-rule- * |
| column-rule-color | Especifica a cor da regra entre as colunas |
| column-rule-style | Especifica o estilo da regra entre as colunas |
| column-rule-width | Especifica a largura da regra entre as colunas |
| column-span | Especifica quantas colunas um elemento deve abranger entre |
| column-width | Especifica, uma largura ideal sugerido para as colunas |
| columns | Um atalho para definir coluna de largura e column-count |