CSS flera kolumner
- Föregående sida CSS sidbrytning
- Nästa sida CSS användargränssnitt
CSS multi-column layout
CSS multi-column layout allows us to easily define multi-column text - just like a newspaper:
Three Kingdoms Romance
Första gången
Fira Taoyuan heseherrenas tre allianser
Avhugga Huangjien heroernas huvuden för att etablera sin ära
Berättelsen om den stora makten i världen, som alltid förändras, är som att dela upp och förena: vid slutet av den yin- och yang-dynastin delades de sju rikena, och de förenades med Qin; och efter att Qin föll, delades Chu och Han, och förenades åter med Han; från kejsar Gaozu, som besegrade den gula ormen och reste sig för att ena världen, fortsatte till kejsar Xian, och så delades de upp i tre rikena. Ursprunget till kaoset började troligen vid kejsar Huangdi och Lingdi. Kejsar Huandi begränsade de goda människorna och trodde på eunuchen. När kejsar Huandi dog, besteg kejsar Lingdi tronen, och general Liu Wu och kejsar Chen Fan hjälpte varandra; vid denna tid manipulerade eunuchen som Cao Jie makt, och Liu Wu och Chen Fan planerade att avrätta dem, men deras planer var inte hemliga nog och de blev dödade av dem, och de små tjänarna blev ännu mer mäktiga. Den fjärde månaden i den andra året av Jianning, befann sig kejsaren i Wende-palatset. När han just började sitta ner, blåste en kraftig vind upp från taket, och en stor grön orm flög ner från taket och klev upp på stolen. Kejsaren ramlade till marken och hans närmaste hjälpte honom upp i palatset, och alla offentliga tjänare flydde. Snart försvann ormen. Plötsligt började det storma och regna med hagel, som inte slutade förrän natten, och många byggnader förstördes. Året efter, i den andra månaden av Jianning, skedde en jordbävning i Luoyang; och havet svämmade över, och alla invånare längs kusten blev dragen ut i havet av de stora vågorna. Året 168, en honhona förvandlades till en hanhona. Den första dagen i den sjätte månaden, en svart moln som var över tio meter högt flydde in i Wende-palatset. I den sjunde månaden, en regnbåge visades på Yutang, och kusten av Wuyuan Shan bröts sönder. Dessa och andra olyckliga händelser var inte bara ett enda tecken. Kejsaren utgav ett edikt till sina rådgivare för att fråga om orsaken till katastroferna, och jiangshi Cai Yong skrev ett brev, och han ansåg att det var på grund av att kejsarinnan deltog i politiken, och hans ord var mycket klara och direkta. Kejsaren tittade på brevet och suckade, och började byta kläder. Cao Jie såg tillbaka och berättade för alla runt omkring; han blev fällande för andra anledningar och skickades tillbaka till landsbygden. Senare blev Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, Guo Sheng tio personer som band sig samman för att vara onda, och de kallades 'tio vanliga tjänare'. Kejsaren beundrade Zhang Rang och kallade honom 'far'. Då blev rikets politik dagligen sämre och alla människor i världen tänkte på kaos, och banditerna började blomstra.
...... ......
CSS 多列属性
在本章中,您将学到以下多列属性:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
属性 | 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 列规则
column-rule-style
属性规定列之间的规则样式:
实例
div { column-rule-style: solid; }
column-rule-width
属性规定列之间的规则宽度:
实例
div { column-rule-width: 1px; }
column-rule-color
属性规定列之间的规则的颜色:
实例
div { column-rule-color: lightblue; }
column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性。
下例设置了列之间的规则的宽度、样式和颜色:
实例
div { column-rule: 1px solid lightblue; }
CSS 多列属性
下表列出了所有的多列属性:
属性 | 描述 |
---|---|
column-count | 规定元素应划分的列数。 |
column-fill | 规定如何填充列。 |
column-gap | 指定列之间的间隙。 |
column-rule | 用于设置所有 column-rule-* 属性的简写属性。 |
column-rule-color | 规定列之间规则的颜色。 |
column-rule-style | 规定列之间的规则样式。 |
column-rule-width | 规定列之间的规则宽度。 |
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