Colunas CSS

Alinhamento de colunas CSS

A alinhamento de colunas CSS nos permite definir facilmente múltiplas colunas de texto - como um jornal:

Romance dos Três Reinos

Primeiro volume
Reuniu os heróis da Pérola da Montanha para formar uma aliança
Matou o herói dos Yellow Turbans e estabeleceu o primeiro feito

Fala-se da grande tendência do mundo, dividida por um longo tempo, unida por um longo tempo, dividida por um longo tempo, unida por um longo tempo: no final da dinastia Zhou, sete países se dividiram e entraram no Qin; após a destruição do Qin, Chu e Han se dividiram e novamente entraram no Han; a dinastia Han, desde que o fundador Gaozu matou a serpente e se levantou, unificou o mundo. Mais tarde, o renascimento de Guangwu, passou para o Xian Di, dividindo-se em três reinos. A razão principal para a desordem foi provavelmente iniciada pelos imperadores Huande e Lingdi. O imperador Huande proibiu os homens de bem, e acreditou nos eunucos. Quando o imperador Huande morreu, o imperador Lingdi subiu ao trono, o general He Wu, o professor Chen Fan, ajudaram a governar juntos; na época, os eunucos Cao Jie e outros manipularam o poder, He Wu e Chen Fan planejaram matá-los, mas a informação não foi mantida em segredo, e eles foram assassinados, e os eunucos se tornaram ainda mais poderosos. No dia do quarto dia do segundo mês de Jian宁, o imperador estava no Templo Wende. Quando ele estava subindo ao trono, uma tempestade de vento forte veio das esquinas do palácio. Uma grande serpente verde voou do teto para baixo, entrelaçando-se na cadeira. O imperador caiu assustado, e seus guardas o ajudaram a entrar no palácio, e todos os oficiais fugiram. Em pouco tempo, a serpente desapareceu. De repente, houve uma tempestade de granizo, que durou até a meia-noite, destruíndo muitas casas. Em 4 de fevereiro de 172, um terremoto aconteceu em Luoyang; e o mar invadiu, os moradores costeiros foram arrastados pelo grande mar para o oceano. Em 178, uma galinha fêmea se tornou um galo. No primeiro dia do sexto mês, uma nuvem negra de mais de dez metros de altura entrou no Templo Wende. Em julho, um arco-íris apareceu no Yutang, e a margem da montanha Wuyuan se rompeu. Muitos sinais de má sorte, não apenas um. O imperador emitiu um edital perguntando aos membros do conselho sobre a causa dos desastres, o conciliador Cai Yong apresentou uma petição, afirmando que a nuvem e a galinha se transformaram, foi o resultado da participação dos eunucos na política, as palavras foram muito diretas. O imperador, ao ler o documento, suspirou e se levantou para trocar de roupa. Cao Jie, que estava atrás, espiou, e declarou para todos os lados; então ele foi acusado de um crime por outros assuntos e expulso para o campo. Depois, Zhang Rang, Zhao Zhong, Feng Yu, Duan Gui, Cao Jie, Hou Luan, Jie Shuo, Cheng Kuang, Xia Yun, Guo Sheng, dez pessoas se aliam para fazer o mal, chamadas de 'dez eunucos constantes'. O imperador respeitava Zhang Rang, chamando-o de 'pai'. A política do governo se tornou cada vez pior, levando os corações dos cidadãos a desordem, e os bandidos surgiram como abelhas e moscas.

...... ......

CSS Multi-column Properties

In this chapter, you will learn the following multi-column properties:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Property Chrome IE Firefox Safari Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS Create Multi-column

column-count Property defines the number of columns the element should be divided into.

The following example divides the text in the <div> element into 3 columns:

Example

div {
  column-count: 3;
}

Try It Yourself

CSS Specify Column Gap

column-gap Property defines the space between columns.

The following example specifies that the gap between columns should be 40 pixels:

Example

div {
  column-gap: 40px;
}

Try It Yourself

CSS Column Rule

column-rule-style Property defines the style of the rule between columns:

Example

div {
  column-rule-style: solid;
}

Try It Yourself

column-rule-width Property defines the width of the rule between columns:

Example

div {
  column-rule-width: 1px;
}

Try It Yourself

column-rule-color Property defines the color of the rule between columns:

Example

div {
  column-rule-color: lightblue;
}

Try It Yourself

The column-rule property is a shorthand property used to set all the above column-rule-* properties.

The following example sets the width, style, and color of the rule between columns:

Example

div {
  column-rule: 1px solid lightblue;
}

Try It Yourself

Specify how many columns the element should span

column-span Property defines how many columns the element should span.

The following example specifies that the <h2> element should span all columns:

Example

h2 {
  column-span: all;
}

Try It Yourself

Specify column width

column-width Property specifies the recommended best width for columns.

The following example specifies that the recommended best width for columns should be 100px:

Example

div {
  column-width: 100px;
}

Try It Yourself

CSS Multi-column Properties

The following table lists all multi-column properties:

Property Description
column-count Define the number of columns the element should be divided into.
column-fill Define how to fill the columns.
column-gap Specify the gap between columns.
column-rule Used to set the shorthand property for all column-rule-* properties.
column-rule-color Define the color of the rule between columns.
column-rule-style Define the rule style between columns.
column-rule-width Define the rule width between columns.
column-span Determinar quantas colunas um elemento deve cruzar.
column-width Especificar o melhor comprimento recomendado para as colunas.
columns Atributo abreviado para definir column-width e column-count.