CSS wielokolumny
- Poprzednia strona CSS paginacja
- Następna strona CSS interfejs użytkownika
CSS wielokolumnowy układ
CSS wielokolumnowy układ pozwala nam łatwo zdefiniować wielokolumnowy tekst - jak gazeta:
Opowieść o trzech królestwach
Pierwszy raz
W spotkaniu w ogrodzie Tao yuan trzej bohaterowie zadeklarowali trójstronną przyjaźń
Mówi się, że globalne trendy, dzielące się przez długi czas, muszą się zjednoczyć, a zjednoczone przez długi czas muszą się podzielić: w końcu siedem królestw w Zhou dzieliło się, a potem weszły do Qin; po tym, jak Qin upadło, Chu i Han dzieliły się, a potem weszły do Han; dynastia Han od czasów cesarza Gaozu, który zabił węża, zorganizował powstanie, zjednoczyła cały świat, a potem cesarz Guangwu wznowił dynastię, przekazując ją cesarzowi Xian, co doprowadziło do podziału na trzy królestwa. Przyczyna chaosu prawdopodobnie zaczęła się od cesarzy Huande i Lingdi. Cesarski Huande ograniczył dobroczyńców, a cesarski Lingdi wierzył w eunuchów. Po śmierci cesarskiego Huande, cesarski Lingdi objął tron, generał Dou Wu i cesarski chanlin Chen Fan wspólnie go wspierali; w tym czasie eunuch Cao Jie i inni manipulowali władzą, Dou Wu i Chen Fan planowali ich zlikwidować, ale sprawa nie była tajna, przeciwnie, zostali zabici przez nich, a od tego czasu eunuchowie stali się jeszcze bardziej bezczelni. 2 kwietnia roku Jianning, cesarz przebywał w Pałacu Wende. Gdy dopiero usiadł na tronie, nagle w kącie sali zaczęła porywać się burza, a z sufitu spadła duża niebieska wąż, oplatająca się wokół krzesła. Cesarski Lingdi został przerażony i upadł, a jego słudzy natychmiast go udali się do pałacu, a wszyscy urzędnicy uciekli. Po chwili wąż zniknął. Nagle zaczęła się burza z gradem, która trwała do nocy, zniszczając wiele domów. W lutym roku Jianning 4, w Luoyang doszło do trzęsienia ziemi; a morze wylało, a mieszkańcy nadmorscy zostali pochłonięci przez ogromne fale. W roku Guanghe 1, że kura żeńska zmieniła się w kura samca. 1 czerwca, czarna chmura o długości kilkunastu metrów wleciała do Pałacu Wende. W lipcu, nad Pałacem Jingu pojawiła się tęcza, a strona Wuyuan Shan pękła. Wiele niespodzianek, nie tylko te. Cesarski Lingdi wydał rozkaz, aby zapytać ministrów o przyczynę katastrof, a minister Cai Yong złożył memoriał, uważając, że wąż spadł na kurę, co było spowodowane przez interwencję kobiet w polityce, jego słowa były dość bezpośrednie. Cesarski Lingdi przeczytał memoriał i westchnął, a potem wstał, aby zmienić ubranie. Cao Jie, który szedł za nim, ujawnił to wszystkim; potem na podstawie innych spraw oskarżył Cai Yong o przestępstwo i wygnał go na wieś. Później Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, Guo Sheng dziesięciu ludzi byli sprzymierzeńcami i złodziejami, nazywani
...... ......
CSS wielokolumnowe atrybuty
W tym rozdziale nauczysz się poniższych atrybutów wielokolumnowych:
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
Wsparcie przeglądarki
Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje ten atrybut.
Atrybut | 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 tworzy wielokolumny
column-count
Atrybut określa liczbę kolumn, które element powinien podzielić.
Poniższy przykład dzieli tekst w elemencie <div> na 3 kolumny:
Przykład
div { column-count: 3; }
CSS określa odstęp między kolumnami
column-gap
Atrybut określa odstęp między kolumnami.
Poniższy przykład określa odstęp między kolumnami na 40 pikseli:
Przykład
div { column-gap: 40px; }
CSS reguły kolumn
column-rule-style
Atrybut określa styl pomiędzy kolumnami:
Przykład
div { column-rule-style: solid; }
column-rule-width
Atrybut określa szerokość pomiędzy kolumnami:
Przykład
div { column-rule-width: 1px; }
column-rule-color
Atrybut określa kolor pomiędzy kolumnami:
Przykład
div { column-rule-color: lightblue; }
Atrybut column-rule jest używany do ustawienia skróconej wersji wszystkich atrybutów column-rule-*.
Poniższy przykład ustawia szerokość, styl i kolor pomiędzy kolumnami:
Przykład
div { column-rule: 1px solid lightblue; }
Określ, ile kolumn element powinien przechodzić
column-span
Atrybut określa, ile kolumn element powinien przechodzić.
Poniższy przykład określa, że element <h2> powinien przechodzić przez wszystkie kolumny:
Przykład
h2 { column-span: all; }
Określ szerokość kolumny
column-width
Atrybut określa sugerowaną najlepszą szerokość kolumny.
Poniższy przykład określa, że szerokość sugerowanej najlepszej wartości dla kolumny powinna wynosić 100px:
Przykład
div { column-width: 100px; }
CSS wielokolumnowe atrybuty
Poniższa tabela zawiera wszystkie atrybuty wielokolumnowe:
Atrybut | Opis |
---|---|
column-count | Określa liczbę kolumn, które element powinien podzielić. |
column-fill | Określa sposób wypełniania kolumn. |
column-gap | Określa odstęp między kolumnami. |
column-rule | Używany do ustawienia skróconej wersji wszystkich atrybutów column-rule-*. |
column-rule-color | Określa kolor pomiędzy kolumnami. |
column-rule-style | Określa styl pomiędzy kolumnami. |
column-rule-width | Określa szerokość pomiędzy kolumnami. |
column-span | Określenie liczby kolumn, które element powinien przekroczyć. |
column-width | Określenie zalecanego szerokości dla kolumn. |
columns | Krótki zapis właściwości column-width i column-count. |
- Poprzednia strona CSS paginacja
- Następna strona CSS interfejs użytkownika