Predefinição:Div col/doc

Suporte dos navegadores para o layout
de múltiplas colunas em CSS3

Internet Explorer	Firefox	Safari	Chrome	Opera
≤ 9	≤ 1.0	≤ 2	—	≤ 11.0
10 (2012)	≥ 1.5 (2005)	≥ 3 (2007)	≥ 1 (2008)	≥ 11.1 (2011)

Esta predefinição, juntamente com a {{div col fim}}, é utilizada para dividir uma lista em duas colunas, com a opção de especificar que a fonte tenha um tamanho menor. Ela tem a vantagem sobre as demais predefinições de colunas (isto é, {{col-begin}}) de quebrar automaticamente cada coluna em um tamanho idêntico, de modo que não seja preciso encontrar manualmente onde fica o "meio" das duas colunas, por exemplo.

Esta predefinição cria múltiplas colunas nos navegadores que oferecem suporte a pelo menos uma das seguintes propriedades CSS:

• column-count (para os navegadores compatíveis com CSS3; ver CSS3 module: Multi-column layout)
• -moz-column-count (para navegadores baseados em Mozilla/Gecko tais como o Firefox)
• -webkit-column-count (para os navegadores baseados em WebKit tais como o Safari e o Google Chrome)

Uso

colunas = (ou {{{1}}})

especifica o número de colunas. Valor por padrão é 2.

colwidth = (ou {{{2}}})

especifica a largura das colunas, e determina dinamicamente a quantidade de colunas com base na largura da tela; mais colunas serão exibidas em monitores maiores. Este parâmetro tem prioridade sobre colunas=.

separador =

produz um separador vertical entre as colunas se for definido como sim.

small =

specifica que a fonte ser menor (80%) se for definido como sim.

style =

especifica estilos personalizados.

Exemplos

Sem definir parâmetros

O código wiki

{{Div col}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col fim}}

produz o seguinte resultado:

• a
• b
• c
• d
• e
• f
• g
• h

Definição do número de colunas

Também podemos dividir em 3 colunas (ou mais), acrescentando o parâmetro cols=número. Eis um exemplo desta divisão:

{{Div col|3}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col fim}}

O resultado é a seguinte lista:

• a
• b
• c
• d
• e
• f
• g
• h

Definição da largura das colunas

{{Div col||10em}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col fim}}

produz

• a
• b
• c
• d
• e
• f
• g
• h

Inclusão de um separador

{{Div col|separador=sim}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col fim}}

produz:

• a
• b
• c
• d
• e
• f
• g
• h

Redução do tamanho da fonte

Outra parâmetro é o pequeno=sim, que reduz o tamanho do texto:

{{Div col|pequeno=sim}}
* a
* b
* c
* d
* e
* f
* g
* h
{{Div col fim}}

mostrará na tela:

• a
• b
• c
• d
• e
• f
• g
• h

Ver também

• {{multicol}}
• {{col-begin}}
• {{colunas-lista}}