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

Spróbuj sam

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

Spróbuj sam

CSS reguły 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 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;
}

Spróbuj sam

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.