CSS wielokolumny

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;
}

Spróbuj sam

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;
}

Spróbuj sam

CSS zasady kolumn

column-rule-style Atrybut określa styl pomiędzy kolumnami:

Przykład

div {
  column-rule-style: solid;
}

Spróbuj sam

column-rule-width Atrybut określa szerokość pomiędzy kolumnami:

Przykład

div {
  column-rule-width: 1px;
}

Spróbuj sam

column-rule-color Atrybut określa kolor pomiędzy kolumnami:

Przykład

div {
  column-rule-color: lightblue;
}

Spróbuj sam

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;
}

Spróbuj sam

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;
}

Spróbuj sam

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;
}

Spróbuj sam

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.