CSS monikolonnaisuus
- Edellinen sivu CSS sivutus
- Seuraava sivu CSS käyttöliittymä
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: }
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ä: }
column-gap: 40px;
column-rule-style
CSS sarakkeiden säännöt
Esimerkki
div { Ominaisuus määrittää sarakkeiden välisten säännöllisten tyylin: }
column-rule-width
column-rule-width: 1px;
Esimerkki
div { Ominaisuus määrittää sarakkeiden välisten säännöllisten leveyden: }
column-rule-color
column-rule-color: lightblue;
Esimerkki
div { Ominaisuus määrittää sarakkeiden välisten säännöllisten värit: }
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; }
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; }
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; }
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. |
- Edellinen sivu CSS sivutus
- Seuraava sivu CSS käyttöliittymä