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
Zaproszenie do wino w ogrodzie jabłkowym, trójliga szlachetnych
Mówi się, że tendencje globalne, po długim rozpadzie, muszą się zjednoczyć, a po długim zjednoczeniu muszą się rozpadnąć: w końcu siedem królestw podzieliło się, a następnie weszły do Qin; po upadku Qin, Chu i Han podzieliły się, a następnie weszły do Han; Królestwo Han od czasów cesarza Gaozu, który zabił węża, zorganizował powstanie, zjednoczyło cały świat, a następnie cesarz Guangwu wznowił cesarstwo, przekazując je cesarzowi Xian; w końcu podzielono się na trzy królestwa. Przyczyna chaosu prawdopodobnie zaczęła się od cesarzy Huangdi i Lingdi. Cesarski Huangdi ograniczył dobroczyńców, a cesarski Lingdi wierzył w eunuchów. Po śmierci cesarskiego Huangdi, cesarski Lingdi objął tron, generał Doushu, prefekt Chen Fan, wspólnie go wspierali; wówczas eunuch Cao Jie i inni manipulowali władzą, Doushu i Chen Fan planowali ich zlikwidować, ale sprawy nie były tajne, przeciwnie, zostali zabici, a od tego czasu eunuchowie stali się coraz bardziej bezczelni. W kwietniu drugiego roku Jianning, cesarz siedział w Pałacu Wende. Gdy dopiero co usiadł, nagle wiatr z hukiem zaczął się wiać z narożnika sali. Nagle pojawiła się duża niebieska wąż, która skoczyła z belki, owijając się wokół krzesła. Cesarski Lingdi został przerażony i upadł, a jego strażnicy natychmiast go uratowali, wprowadzając go do pałacu, a wszyscy urzędnicy uciekli w panice. Po chwili wąż zniknął. Nagle zaczęło się gwałtowne burze z gradem, które trwało do nocy, zniszczając wiele domów. W lutym czwartego roku Jianning, cesarstwo Luoyang zaczęło trząść się. Ponadto woda morska rozlała się, a mieszkańcy nadmorscy zostali zepchnięci przez ogromne fale do morza. W pierwszym roku Guanghao, samiczne kury zmieniły się w samce. Na pierwszym dniu czerwca, czarna chmura o długości kilkunastu metrów wleciała do Pałacu Wende. W lipcu, kometę można było zobaczyć nad Pagodą Jingu, a strona Wuyuan na wzgórzu pękła. Wiele złych znaków, nie tylko jeden. Cesarski Lingdi ogłosił, że zapyta ministrów o przyczynę tych zwiastunów, a minister Cai Yong złożył memoriał, uważając, że to wynikingerencji kobiet w polityce, jego słowa były bardzo odważne. Cesarski Lingdi przeczytał memoriał i westchnął, a potem wstał, aby zmienić ubranie. Cao Jie, który szedł za nim, ujawnił to wszystkim. Następnie na podstawie innych spraw oskarżył Cai Yonga o przestępstwo i odesłał go do wsi. Później Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, JIan Shuo, Cheng Kuang, Xia Yun, Guo Sheng dziesięciu ludzi byli sprzymierzeńcami i zdrajcami, nazywani
...... ......
CSS wielokolumnowe atrybuty
W tym rozdziale nauczysz się takich 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
Numer w tabeli wskazuje 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 odległość między kolumnami
column-gap
Atrybut określa odległość między kolumnami:
Poniższy przykład określa, że odległość między kolumnami powinna wynosić 40 pikseli:
Przykład
div { column-gap: 40px; }
CSS zasady 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 zalecaną szerokość kolumny.
Poniższy przykład określa, że szerokość 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śl liczbę kolumn, które element powinien podzielić. |
column-fill | Określ, jak wypełniać kolumny. |
column-gap | Określ rozmiar między kolumnami. |
column-rule | Używana do ustawienia skróconej wersji wszystkich atrybutów column-rule-*. |
column-rule-color | Określ kolor pomiędzy kolumnami. |
column-rule-style | Określ styl pomiędzy kolumnami. |
column-rule-width | Określ szerokość pomiędzy kolumnami. |
column-span | Określa, ile kolumn powinien przeciągnąć element. |
column-width | Ustal najlepszą szerokość dla kolumn. |
columns | Krótki zapis właściwości do ustawiania column-width i column-count. |
- Poprzednia strona CSS paginacja
- Następna strona CSS interfejs użytkownika