CSS Multicolumn

CSS multi-column layout

CSS multi-column layout laat ons gemakkelijk meerdere kolommen tekst definiëren - net als een krant:

Romans van de drie koninkrijken

Het eerste deel
Het diner in de Tuanyuan, de helden sluiten drie bondgenoten
Het afslachten van de geleerde helden van de geleerde vlag

Het verhaal van de grotere wereldlijke tendens, wat langzaam uiteenvalt, zal zich weer verenigen, en wat langdurig samengaat, zal zich weer uiteenvalt: aan het einde van de Zhou-dynastie verdeelden de zeven koninkrijken, en werden opgenomen in de Qin-dynastie; na de ondergang van de Qin-dynastie verdeelden de Chu en Han, en werden opgenomen in de Han. De Han-dynastie, sinds keizer Gaozu de witte slang versloeg en opstand voerde, verenigde het hele land, en later herstelde keizer Guangwu de macht, en werd overgeleverd aan keizer Xian di. Vervolgens verdeelden zich de drie rijken. De oorzaak van de chaos lijkt te zijn begonnen bij keizeran Huan en Ling. Keizer Huan verbiedde goede mensen, en geloofde in de eunuchs. Toen keizer Huan stierf, werd keizer Ling op de troon gezet, en generaal Dou Wu en academische minister Chen Fan werkten samen; er waren eunuchs zoals Cao Jie die macht uitoefenden, Dou Wu en Chen Fan wilden hen uitroeien, maar het geheim bleef niet geheim, en ze werden gedood, en de eunuchs werden nogal onbeheersbaar. Op de vierde dag van de derde maand van de derde jaar van de Jian宁-dynastie, zat de keizer in de Wende-hal. Terwijl hij opstond, brak er een hevige wind op uit de hoek van de hal. Er verscheen een grote groene slang die van het houten gewelf naar beneden vloog en zich om de stoel wierp. De keizer viel flauw en werd snel gered en naar het paleis gebracht, alle ambtenaren vluchtten. Opeens verdween de slang. Opeens begon er een hevige storm met onweer en ijskristallen, die tot middernacht duurde, en veel huizen werden beschadigd. In het tweede jaar van de derde maand van de vierde jaar van de Jian宁-dynastie, werd Luoyang getroffen door een aardbeving; en de zee brak over, en de bewoners langs de kust werden door de golven in zee gesleurd. In het eerste jaar van de Guanghao-dynastie, veranderde een vrouwtje in een mannetje. Op de eerste dag van de zesde maand, verscheen een zwarte wolk van meer dan tien cijfers hoog in de Wende-hal. In de zevende maand van het najaar, verscheen een regenboog in de Yutang, en de vijf yuan-gebergte en de kustlijn braken uit. Er waren veel onheilspellende gebeurtenissen, niet alleen dit. De keizer gaf een edict uit om de oorzaak van de rampen te vragen aan de ministers, en de adviseur Cai Yong diende een brief in, waarin hij dacht dat de wolk in een haan veranderde, het gevolg was van de politieke bemoeienissen van de vrouwen en de eunuchs, zijn woorden waren behoorlijk scherp. De keizer zuchtte bij het lezen van het document en stond op om zich om te kleden. Cao Jie keek achteraan en vertelde het iedereen; vervolgens werd Cai Yong beschuldigd van een misdaad en werd naar zijn land teruggebracht. Later vormden Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, Guo Sheng tien mensen een kwaadaardige alliantie, bekend als de 'tien altijd-wie'. De keizer vertrouwde Zhang Rang, en noemde hem 'Opa'. De politiek werd dag na dag slechter, en de mensen in het hele land begonnen te verzetten tegen de orde, en de dieven brachten opstand.

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

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

The property specifies the number of columns that 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

The property specifies the interval 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 Rule

Example

div {
  The property specifies the style of the rule between columns:
}

Try It Yourself

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

Example

div {
  The property specifies the width of the rule between columns:
}

Try It Yourself

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

Example

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

The following example specifies that the suggested 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 that the element should be divided into.
column-fill Define how columns are filled.
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 Stel in hoeveel kolommen een element moet overschrijden.
column-width Specificeer de aanbevolen beste breedte voor de kolommen.
columns Korte eigenschap voor het instellen van column-width en column-count.