Propriedade de largura de coluna CSS
Exemplo
Especifique que a largura da coluna deve ser de 100px:
div
{
column-width: 100px;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A column-width
propriedade especifica a largura da coluna.
O número de colunas será o número mínimo de colunas necessário para mostrar todo o conteúdo do elemento.
column-width
é uma propriedade flexível. Pense
column-width
como uma sugestão de largura mínima para o navegador. Quando o navegador não puder caber pelo menos duas colunas na largura especificada, as colunas pararão e cairão em uma única coluna.
Valor padrão: | auto |
---|---|
Herdado: | não |
Animavel: | sim. Leia sobre animáveis |
Versão: | CSS3 |
Sintaxe JavaScript: | objeto .style.columnWidth="100px" |
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total à propriedade.
Números seguidos por -webkit- ou -moz- especificam a primeira versão que funcionou com um prefixo.
Property | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Sintaxe CSS
column-width: auto|length|initial|inherit;
Valores de propriedade
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
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 columnWidth