CSS flera kolumner
- Föregående sida CSS sidbrytning
- Nästa sida CSS användargränssnitt
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: }
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: }
column-gap: 40px;
column-rule-style
CSS Kolonn Regel
Exempel
div { Egenskapen specificerar stilen för regeln mellan kolonnerna: }
column-rule-width
column-rule-style: solid;
Exempel
div { Egenskapen specificerar bredden för regeln mellan kolonnerna: }
column-rule-color
column-rule-width: 1px;
Exempel
div { Egenskapen specificerar färgen för regeln mellan kolonnerna: }
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; }
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; }
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; }
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. |
- Föregående sida CSS sidbrytning
- Nästa sida CSS användargränssnitt