Colunas CSS
- Página anterior Página 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 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; }
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; }
CSS Column Rule
column-rule-style
Property defines the style of the rule between columns:
Example
div { column-rule-style: solid; }
column-rule-width
Property defines the width of the rule between columns:
Example
div { column-rule-width: 1px; }
column-rule-color
Property defines the color of the rule between columns:
Example
div { column-rule-color: lightblue; }
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; }
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; }
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; }
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. |
- Página anterior Página CSS
- Próxima página Interface do usuário CSS