Colunas CSS
- Página anterior Paginação CSS
- Próxima página Interface do usuário 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: }
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: }
column-gap: 40px;
column-rule-style
CSS Column Rules
Example
div { Property specifies the style of the rule between columns: }
column-rule-width
column-rule-style: solid;
Example
div { Property specifies the width of the rule between columns: }
column-rule-color
column-rule-width: 1px;
Example
div { Property specifies the color of the rule between columns: }
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; }
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; }
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; }
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. |
- Página anterior Paginação CSS
- Próxima página Interface do usuário CSS