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 capítulo
Celebrou a festa de桃园 com heróis e fez três alianças
Matou o herói com o cinto amarelo e estabeleceu o primeiro mérito

Fala-se que a tendência da grandeza do mundo, dividida por muito tempo, deve se unir, e unida por muito tempo, deve se dividir: no final da dinastia Zhou, sete reinos se disputaram, e foram absorvidos pelo estado Qin; após a destruição do estado Qin, os reinos Chu e Han se disputaram, e novamente foram absorvidos pelo estado Han. A dinastia Han, desde que o fundador Gaozu matou a serpente e se levantou, unificou o mundo. Depois disso, a中兴 da dinastia Han, passou ao imperador Xian, e foi dividida em três reinos. A análise da causa da desordem, provavelmente começou com os imperadores Huande e Ling. O imperador Huande proibiu os homens de bem, e acreditou nos eunucos. Quando o imperador Huande morreu, o imperador Ling subiu ao trono, o general He Wu e o acadêmico Chen Fan, juntos o ajudaram. Naquela é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. A partir daí, os eunucos se tornaram ainda mais arrogantes. No dia do quarto mês do segundo ano de Jian宁, o imperador estava no Palácio Wende. Quando ele estava subindo ao trono, uma tempestade de vento forte começou no canto do palácio. Uma grande serpente verde apareceu voando do teto, espirrando sobre a cadeira. O imperador caiu em pânico e foi socorrido para o palácio, e todos os oficiais fugiram. Em breve, a serpente desapareceu. De repente, houve trovões e chuvas fortes, seguidas de granizo, que não pararam até a meia-noite, destruíram muitas casas. No segundo ano de Jian宁, houve um terremoto em Luoyang; também, o mar invadiu, e os residentes costeiros foram arrastados pelo grande mar para o oceano. No primeiro ano de Guanghe, 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 Palácio Wende. No sétimo mês do outono, um arco-íris apareceu no Palácio Yu, e as margens das montanhas Wuyuan se desmoronaram. Tudo isso era um sinal de má sorte, não apenas um. O imperador emitiu um edital pedindo aos membros do conselho que explicassem a causa das desastrosas mudanças climáticas. O acadêmico Cai Yong apresentou uma petição, afirmando que a chuva de serpente e a galinha se tornaram macho eram o resultado da intervenção da corte feminina, e suas palavras eram diretas e honestas. O imperador, ao ler a petição, suspirou e se levantou para trocar de roupa. Cao Jie, que estava atrás, espiou e anunciou para todos os lados; em seguida, ele acusou Cai Yong de um crime e o expulsou para o campo. Depois disso, Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, Guo Sheng, dez homens se aliam para fazer o mal, chamados de 'dez eunucos constantes'. O imperador confiava em Zhang Rang, chamando-o de 'pai'. A política do governo se tornou cada vez pior, levando ao descontentamento geral do povo e ao aumento dos bandidos.

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

CSS Multi-column Properties

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

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

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

Browser Support

Property The numbers in the table indicate the first browser version that fully supports this property. Chrome IE Firefox Safari
column-count 71.0 50.0 10.0 52.0 9.0
column-gap 71.0 50.0 10.0 52.0 9.0
column-rule 71.0 50.0 10.0 52.0 9.0
column-rule-color 71.0 50.0 10.0 52.0 9.0
column-rule-style 71.0 50.0 10.0 52.0 9.0
column-rule-width 71.0 50.0 10.0 52.0 9.0
column-span 71.0 50.0 Opera 52.0 9.0
column-width 71.0 50.0 10.0 52.0 9.0

37.0

column-count CSS Create Multi-column

Property specifies the number of columns the element should be divided into.

Example

div {
  The following example divides the text within the <div> element into 3 columns:
}

Try It Yourself

column-count: 3;

column-gap CSS Specify Column Gap

Property specifies the spacing between columns.

Example

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

Try It Yourself

column-gap: 40px;

column-rule-style CSS Column Rules

Example

div {
  Property specifies the style of the rule between columns:
}

Try It Yourself

column-rule-width column-rule-style: solid;

Example

div {
  Property specifies the width of the rule between columns:
}

Try It Yourself

column-rule-color column-rule-width: 1px;

Example

div {
  Property specifies the color of the rule between columns:
}

Try It Yourself

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

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 specifies 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 suggested best width for the columns.

The following example specifies that the suggested best width for the 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 attribute 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 largura recomendada para as colunas.
columns Propriedade abreviada para definir column-width e column-count.