CSS flera kolumner

CSS-mallning av flera kolumner

CSS-mallning av flera kolumner låter oss enkelt definiera flera kolumner av text - liksom en tidning:

Trilogin om de tre rik

Första gången
Middag i桃园, tre hjältar sluter sig i allians

Så är det med världens stora läge, som alltid skiljer sig från varandra, och alltid kommer att förena sig: vid slutet av de sju stater, delades de upp och kom under Qin; och efter att Qin hade fallit, striderna mellan Chu och Han fortsatte, och de kom sedan under Han; under Han-dynastin, efter att Gaozu hade avskurit en vit orm och reste sig, förenade han hela världen, och senare återupprättades under Guangwu, och det övergick till Xian Di, som sedan delades upp i tre rik. Ursprunget till kaoset började troligen vid Huan och Ling kejsarna. Huan kejsaren inskränkte de goda människorna, och föredrog eunuchen. När Huan kejsaren dog, tog Ling kejsaren vid, och generalen Dou Wu och kejsarvikarien Chen Fan, hjälpte varandra; vid denna tid hade eunuchen som Cao Jie maktat, Dou Wu och Chen Fan planerade att döda dem, men affären var inte väl förberedd, och de blev själva mördade, och de inre tjänarna blev sedan ännu mer våldsamma. På den fjärde dagen i den fjärde månaden av Jianning, satt kejsaren i Wende-palatset. När han just hade satt sig, började en stormvind att blåsa från takets hörn, och han såg en stor blå orm som flög ner från taket och slank sig runt stolen. Kejsaren blev chockad och ramlade till marken, och hans tjänare räddade honom och bar honom in i palatset, och alla offentliga personer flydde. Strax försvann ormen. Plötsligt började det regna och haglade, och det fortsatte till natten, och det förstörde många hus. I februari av det fjärde året av Jianning, skedde en jordbävning i Luoyang; och havet spred sig, och alla invånare längs kusten blev sväpta ut i havet av de stora vågorna. I det första året av Guanghe, förvandlades en honhona till en hanhona. På den första dagen i den sjätte månaden, fanns det en svart gas som var över tio yards lång, som flög in i Wende-palatset. I den sjunde månaden, fanns det en regnbåge över Yutang, och alla klippor vid Wuyuan Shan bröts loss. Det fanns många olyckliga tecken, inte bara ett. Kejsaren utgav ett edikt för att fråga sina underlydiga om orsaken till katastroferna, och jianlang Cai Yong föreslog i ett brev att det var kvinnor och eunucker som styrde politiken som orsaken till detta, och hans ord var mycket direkt. Kejsaren såg brevet och suckade, och började byta kläder. Cao Jie såg tillbaka efter honom och meddelade alla runt omkring; och han använde andra ärenden för att sätta Cai Yong i brott, och han skickades tillbaka till sina jordar. Senare var Zhang Rang, Zhao Zhong, Feng Yu, Duan Gui, Cao Jie, Hou Luan, Jie Shuo, Cheng Kuang, Xia Yun, Guo Sheng tio män som var vänliga med varandra och gjorde illa, och kallades "tio vanliga tjänare". Kejsaren föredrog Zha Rang och kallade honom "far

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

CSS Multikolumn Egenskaper

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

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

I detta kapitel kommer du att lära dig följande multikolumnsegenskaper:

Webbläsarstöd

Egenskap Numrerna i tabellen anger den första webbläsaren som helt stöder egenskapen. 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 Skapa Multikolumn

Egenskapen specificerar antalet kolonner som elementet bör dela upp i.

Exempel

div {
  Följande exempel delar texten i <div>-elementet i 3 kolonner:
}

Prova själv

column-count: 3;

column-gap CSS Specificera mellanrum mellan kolonnerna

Egenskapen specificerar mellanrummet mellan kolonnerna.

Exempel

div {
  Följande exempel specificerar mellanrummet mellan kolonnerna till 40 pixlar:
}

Prova själv

column-gap: 40px;

column-rule-style CSS Kolonn Regel

Exempel

div {
  Egenskapen specificerar stilen för regeln mellan kolonnerna:
}

Prova själv

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

Exempel

div {
  Egenskapen specificerar bredden för regeln mellan kolonnerna:
}

Prova själv

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

Exempel

div {
  Egenskapen specificerar färgen för regeln mellan kolonnerna:
}

Prova själv

column-rule-egenskapen är en förkortning för att ställa in alla ovanstående column-rule-*-egenskaper.

Följande exempel ställer in bredden, stilen och färgen för regeln mellan kolonnerna:

Exempel

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

Prova själv

Specificera hur många kolonner elementet bör korsa

column-span Egenskapen specificerar hur många kolonner elementet bör korsa.

Följande exempel specificerar att <h2>-elementet bör korsa alla kolonner:

Exempel

h2 {
  column-span: all;
}

Prova själv

Specificera kolonnens bredd

column-width Egenskapen specificerar rekommenderad optimal bredd för kolonnerna.

Följande exempel specificerar att rekommenderad optimal bredd för kolonnerna bör vara 100px:

Exempel

div {
  column-width: 100px;
}

Prova själv

CSS Multikolumn Egenskaper

Följande tabell visar alla multikolumnsegenskaper:

Egenskap Beskrivning
column-count Bestämmer antalet kolonner som elementet bör dela upp i.
column-fill Bestämmer hur kolonnerna ska fyllas.
column-gap Specificerar mellanrummet mellan kolonnerna.
column-rule Används för att sätta kortform för alla column-rule-*-egenskaper.
column-rule-color Ställer in färgen för regeln mellan kolonnerna.
column-rule-style Ställer in stilen för regeln mellan kolonnerna.
column-rule-width Ställer in regeln för bredden mellan kolonnerna.
column-span Bestäm hur många kolumner en element bör korsa.
column-width Ange det rekommenderade bästa bredden för kolumnen.
columns Kortformad egenskap för att ställa in column-width och column-count.