CSS monikolonnaisuus

CSS monisarakkeinen asettelu

CSS monisarakkeinen asettelu mahdollistaa helposti määrittää monisarakkeista tekstiä - aivan kuin sanomalehdet:

Kolmen valtakunnan tarina

Ensimmäinen kerta
Juhli Pekingin paratiisissa rohkeita sankareita kolme kertaa
Surmaa keltainen lippu sankarien ensimmäinen voitto

Kun maailman laajat voimakkuudet ovat, ne jakaantuvat, mutta myös yhdistyvät, ja yhdistyminen johtaa jakaantumiseen: kun Zhou-dynastian lopulla oli seitsemän valtakuntaa, ne yhdistyivät Qinin alaisuuteen; kun Qinin hallitus loppui, Chu ja Han jakoivat valtansa, ja ne yhdistyivät uudelleen Hanin alaisuuteen. Han-dynastia, alkaen keisari Gaozuin surmaamisesta pythoniin ja kapinasta, yhdisti koko maailman, ja sitten keisari Guangwu uudisti, ja se jatkui keisari Xianin hallitukseen, ja se jakautui kolmeen valtakuntaan. Tarkista sen aiheuttama sekasorto, se alkoi Huan- ja Ling-keisarien aikana. Huan-keisari kielsi hyväksymästä hyviä ihmisiä, ja uskoi eunukkeihin. Kun Huan-keisari kuoli, Ling-keisari nousi valtaistuimelle, suuri kenraali Dou Wu ja taistelija Chen Fan auttoivat toisiaan; tuolloin eunukit, kuten Cao Jie, käyttivät valtaa, Dou Wu ja Chen Fan suunnittelivat heidän tappamistaan, mutta salaisuus ei ollut salaisuus, ja heidät tappettiin, ja keskushallinto alkoi olla yhä enemmän. Jianning 2. vuoden huhtikuun täysikuu, keisari istui Wende-kuningasrannassa. Kun hän nousi istuimeen, tuuli yllättäen puhalsi talon kulmasta, ja näkyi yksi suuri sininen käärme, joka lensi vinosta kattorivistä alas ja kietoutui tuolille. Keisari kaatui, ja hänen henkilökuntansa kiireesti auttoivat häntä takaisin palatsiin, ja kaikki viranomaiset juokseivat paenneiksi. Hetken kuluttua käärme katosi. Yhtäkkiä satoi rankkaa ukkosmyrskyä ja jääisadetta, ja se kesti aina puolenväliin. Monia taloja tuhoutui. Jianning 4. vuoden helmikuussa, Luoyangin maanjäristys; ja meri yltyi, ja rannikkoasukkaiden kaikki vedettiin suurella aallokolla merelle. Guanghao 1. vuonna, naaras kani hylkääntyi koiraaksi. Kesäkuun ensimmäisenä päivänä, musta pilvi yli kaksikymmentä metriä, lensi Wende-kuningasrannan sisään. Syyskuun viidennessä kuussa, taivaallinen silmä näkyi Yutangissa, ja Wuyuanin vuoriston rannat kaatuivat. Monia epäonnekkaita tapahtumia, ei vain yksi. Keisari antoi käskyn kysyä viranomaisilta katastrofin syistä, ja neuvonantaja Cai Yong antoi kirjeen, joka väitti, että taivaallinen silmä putosi ja naaras kani hylkääntyi koiraaksi, se oli naisten ja eunukkien puuttumisen vuoksi, ja hän puhui suoraan. Keisari katsoi kirjettä ja naurahti, ja hän nousi vaihtamaan vaatteita. Cao Jie katsoi häntä takaa ja kertoi kaikille; hän syytti Cai Yongia rikoksesta ja palautti hänet maaseudulle. Myöhemmin Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Luan, Jia Shuo, Cheng Kuang, Xia Yun, Guo Sheng kymmenen ihmistä tekivät yhdessä pahaa, ja heitä kutsuttiin nimellä 'kymmenen aina palvelevaa'. Keisari kunnioitti Zhang Rangia, ja kutsui häntä 'isä'. Hallitus paheni päivä päivältä, ja koko maailman mieli halusi sekasortoa, ja rosvot nousivat ylös.

...... ......

CSS monisarakkeiset ominaisuudet

...... ......

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Tässä luvussa opit seuraavat monisarakkeiset ominaisuudet:

Selaimen tuki

Ominaisuus Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin. Chrome IE Firefox Safari
column-count 71.0 50.0 10.0 52.0 9.0
column-gap 71.0 50.0 10.0 52.0 9.0
column-rule 71.0 50.0 10.0 52.0 9.0
column-rule-color 71.0 50.0 10.0 52.0 9.0
column-rule-style 71.0 50.0 10.0 52.0 9.0
column-rule-width 71.0 50.0 10.0 52.0 9.0
column-span 71.0 50.0 Opera 52.0 9.0
column-width 71.0 50.0 10.0 52.0 9.0

37.0

column-count CSS luo useita sarakkeita

Ominaisuus määrittää, kuinka monta saraketta elementtiä tulisi jakaa.

Esimerkki

div {
  Seuraavassa esimerkissä jaetaan <div>-elementin teksti 3 sarakkeeseen:
}

Kokeile itse

column-count: 3;

column-gap CSS määrittää sarakkeiden välinen aukko

Ominaisuus määrittää sarakkeiden välinen etäisyys.

Esimerkki

div {
  Seuraavassa esimerkissä määritetään, että sarakkeiden välinen etäisyys olisi 40 pikseliä:
}

Kokeile itse

column-gap: 40px;

column-rule-style CSS sarakkeiden säännöt

Esimerkki

div {
  Ominaisuus määrittää sarakkeiden välisten säännöllisten tyylin:
}

Kokeile itse

column-rule-width column-rule-width: 1px;

Esimerkki

div {
  Ominaisuus määrittää sarakkeiden välisten säännöllisten leveyden:
}

Kokeile itse

column-rule-color column-rule-color: lightblue;

Esimerkki

div {
  Ominaisuus määrittää sarakkeiden välisten säännöllisten värit:
}

Kokeile itse

column-rule -ominaisuus on lyhennetty ominaisuus, jota käytetään yllä olevien column-rule-*-ominaisuuksien asettamiseen.

Seuraavassa esimerkissä asetetaan sarakkeiden välisten säännöllisten ominaisuuksien leveys, tyyli ja väri:

Esimerkki

div {
  column-rule: 1px solid lightblue;
}

Kokeile itse

Määritä elementin, joka tulisi kattamaan kuinka monta saraketta

column-span Ominaisuus määrittää elementin, joka tulisi kattaa kuinka monta saraketta.

Seuraavassa esimerkissä määritetään, että <h2>-elementti tulisi kattaa kaikki sarakkeet:

Esimerkki

h2 {
  column-span: all;
}

Kokeile itse

Määritä sarakkeen leveys

column-width Ominaisuus määrittää sarakkeille suositellun parhaan leveyden.

Seuraavassa esimerkissä määritetään, että sarakkeiden suositeltava paras leveys olisi 100px:

Esimerkki

div {
  column-width: 100px;
}

Kokeile itse

CSS monisarakkeiset ominaisuudet

Seuraavassa taulukossa luetellaan kaikki monisarakkeiset ominaisuudet:

Ominaisuus Kuvaus
column-count Määritä, kuinka monta saraketta elementtiä tulisi jakaa.
column-fill Määritä, miten sarakkeita täytetään.
column-gap Määritä sarakkeiden välinen aukko.
column-rule Käytetään kaikkien column-rule-*-ominaisuuksien asettamiseen lyhennetty ominaisuus.
column-rule-color Määritä sarakkeiden välinen säännöllisen värin.
column-rule-style Määritä sarakkeiden välinen säännöllinen tyyli.
column-rule-width Määritä sarakkeiden välinen säännöllinen leveys.
column-span Määritä, kuinka monta saraketta elementtiä tulisi ylittää.
column-width Määritä suositeltava parhaiten käytettävä leveys sarakkeille.
columns Lyhyt muotoilu column-width ja column-count asettamiseen.