Propriedade de preenchimento de coluna CSS
Exemplo
Especifique como preencher as colunas:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A column-fillpropriedade especifica como preencher as colunas, balanceadas ou não.
Dica: Se você adicionar uma altura a um elemento de várias colunas, poderá controlar como o conteúdo preenche as colunas. O conteúdo pode ser balanceado ou preenchido sequencialmente.
| Valor padrão: | Saldo |
|---|---|
| Herdado: | não |
| Animavel: | não. Leia sobre animáveis |
| Versão: | CSS3 |
| Sintaxe JavaScript: | objeto .style.columnFill="auto" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -moz- especificam a primeira versão que funcionou com um prefixo.
| Property | |||||
|---|---|---|---|---|---|
| column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Sintaxe CSS
column-fill: balance|auto|initial|inherit;
Valores de propriedade
| Value | Description |
|---|---|
| balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
| auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Mais exemplos
Exemplo
Divida o texto em um elemento <div> em três colunas:
div
{
column-count: 3;
}
Exemplo
Especifique um intervalo de 40 pixels entre as colunas:
div
{
column-gap: 40px;
}
Exemplo
Especifique a largura, o estilo e a cor da regra entre as colunas:
div
{
column-rule: 4px double #ff00ff;
}
Páginas relacionadas
Tutorial CSS: CSS Múltiplas Colunas
Referência HTML DOM: propriedade columnFill