CSS Multicolumn
- Vorige pagina CSS Paginering
- Volgende pagina CSS Gebruikersinterface
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: }
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: }
column-gap: 40px;
column-rule-style
CSS Column Rule
Example
div { The property specifies the style of the rule between columns: }
column-rule-width
column-rule-style: solid;
Example
div { The property specifies the width of the rule between columns: }
column-rule-color
column-rule-width: 1px;
Example
div { The 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 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
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; }
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; }
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. |
- Vorige pagina CSS Paginering
- Volgende pagina CSS Gebruikersinterface