CSS Multicolumn

CSS Multi-column layout

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

De legende van de drie rijken

Het eerste hoofdstuk
De helden van de geleerde van de geleerde hebben de derde verbintenis gesloten
De helden van de geleerde van de geleerde hebben de eerste prestatie voltooid

Het gezegde luidt: als de wereldorde langdurig gescheiden is, zal hij zich moeten verenigen; als hij langdurig vereend is, zal hij zich moeten scheiden: aan het einde van de Zhou-dynastie verdeelden de zeven staten zich, en werden opgenomen in de Qin-dynastie; na de ondergang van de Qin-dynastie verdeelden Chu en Han zich, en werden opgenomen in de Han-dynastie. De Han-dynastie onder Kaozu begon met de opstand tegen de witte slang en verenigde het hele land, later herstelde Guangwu de dynastie, en bereikte Xian Di, en werd vervolgens verdeeld in drie rijken. De oorzaak van de chaos lijkt te beginnen bij keizer Huandi en keizer Ling. Huandi verbiedde de goede mensen, en geloofde in de eunuchs. Na het overlijden van keizer Huandi, werd keizer Ling op de troon gezet, en generaal Dou Wu en academisch minister Chen Fan werkten samen om hem te begeleiden; er waren eunuchs zoals Cao Jie die macht misbruikten, Dou Wu en Chen Fan planden hen te executeren, maar het geheim werd niet goed bewaard, en ze werden juist door hen vermoord, en de eunuchs werden daarna nog agressiever. Op de vierde dag van de vierde maand van de Derdejaar van Jian宁, was de keizer in de Wende Hall. Terwijl hij zich op de troon begon te plaatsen, brak er een hevige wind op van de hoek van de hal, en er viel een grote blauwe slang van het houten dak naar beneden, zich windend om de stoel. De keizer viel uit zijn dak, en werd door zijn omgeving snel naar binnen geholpen, en alle ambtenaren vluchtten weg. Na een tijd verdween de slang. Opeens begon er een hevige donderstorm met ijsklokken, die tot middernacht duurde, en talloze huizen werden verwoest. In de tweede maand van het vierde jaar van Jian宁, gebeurde er een aardbeving in Luoyang; en de zee brak over, en de bewoners langs de kust werden door de golf in zee gesleurd. In het eerste jaar van Guanghe, veranderde een vrouwtje in een man. Op de eerste dag van de zesde maand, verscheen een zwarte wolk van meer dan tien chi, die in de Wende Hall vloog. In de zevende maand van het najaar, verscheen een regenboog boven de Yutang, en de helling van de Wuyuan-berg brak uit. Alle onheil was niet alleen van één kant. De keizer ondertekende een edict om de oorzaak van de rampen te vragen aan de edelen, en de raadgever Cai Yong stuurde een brief in, waarin hij dacht dat de regenboog viel en het vrouwtje veranderde in een man, dat dit het gevolg was van de bemoeienis van de vrouwelijke paleisdienaren met de politiek, zijn woorden waren vrij scherp. De keizer zuchtte bij het lezen van het bericht en begon zich om te kleden. Cao Jie keek achter hem aan en verklaarde het aan iedereen; hij beschuldigde Cai Yong van zonde op een andere manier en liet hem naar het platteland sturen. 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-wijzen'. De keizer vertrouwde Zhang Rang en noemde hem 'Opa'. De politiek werd dag na dag slechter, en het hele land was in opstand, en de rebellen brachten opstand.

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

CSS Meercolonne Eigenschappen

In dit hoofdstuk zult u de volgende meercolonne-eigenschappen leren:

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

Browser Ondersteuning

De cijfers in de tabel vermelden de eerste browserversie die de eigenschap volledig ondersteunt.

Eigenschap 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 Maak Meercolommen

column-count Eigenschap bepaalt het aantal kolommen dat het element moet verdelen.

Het volgende voorbeeld verdeelt de tekst in de <div> element in 3 kolommen:

Voorbeeld

div {
  column-count: 3;
}

Probeer het zelf uit

CSS Specificeer Kolom Ruimte

column-gap Eigenschap bepaalt de afstand tussen de kolommen:

Het volgende voorbeeld specificeert de afstand tussen de kolommen als 40 pixels:

Voorbeeld

div {
  column-gap: 40px;
}

Probeer het zelf uit

CSS Kolom Regels

column-rule-style Eigenschap bepaalt de stijl van de lijn tussen de kolommen:

Voorbeeld

div {
  column-rule-style: solid;
}

Probeer het zelf uit

column-rule-width Eigenschap bepaalt de breedte van de lijn tussen de kolommen:

Voorbeeld

div {
  column-rule-width: 1px;
}

Probeer het zelf uit

column-rule-color Eigenschap bepaalt de kleur van de lijn tussen de kolommen:

Voorbeeld

div {
  column-rule-color: lightblue;
}

Probeer het zelf uit

De column-rule eigenschap is een afkorting om alle column-rule-* eigenschappen in te stellen.

Het volgende voorbeeld stelt de breedte, stijl en kleur van de lijn tussen de kolommen in:

Voorbeeld

div {
  column-rule: 1px solid lightblue;
}

Probeer het zelf uit

Specificeer hoeveel kolommen het element moet overspannen

column-span Eigenschap bepaalt hoeveel kolommen het element moet overspannen.

Het volgende voorbeeld bepaalt dat de <h2> element moet overspannen worden over alle kolommen:

Voorbeeld

h2 {
  column-span: all;
}

Probeer het zelf uit

Specificeer kolombreedte

column-width Eigenschap specificeert de aanbevolen beste breedte van de kolommen.

Het volgende voorbeeld bepaalt dat de aanbevolen beste breedte van de kolommen 100px moet zijn:

Voorbeeld

div {
  column-width: 100px;
}

Probeer het zelf uit

CSS Meercolonne Eigenschappen

De tabel hieronder lijst alle meercolonne-eigenschappen op:

Eigenschap Beschrijving
column-count Bepaal het aantal kolommen dat het element moet verdelen.
column-fill Bepaal hoe de kolommen worden gevuld.
column-gap Specificeer de ruimte tussen de kolommen.
column-rule Gebruik deze afkorting om alle column-rule-* eigenschappen in te stellen.
column-rule-color Regel de kleur van de lijn tussen de kolommen.
column-rule-style Regel de stijl van de lijn tussen de kolommen.
column-rule-width Regel de breedte van de lijn tussen de kolommen.
column-span Bepaal hoeveel kolommen een element moet overschrijden.
column-width Stel het aanbevolen beste breedte voor de kolommen in.
columns Korte schrijf voor column-breedte en column-count.