Mitme veeru paigutus (ajakiri-sarnane) CSS3-ga
Üldiselt kaotavad inimesed väga pika sisu lugemisel teekonna. Sellepärast jagatakse trükimeedias, näiteks ajakirjades ja ajalehtedes, hõlpsaks lugemiseks mitmeid veerge.
Veeru loomine veebis on täiesti erinev lugu. See on üsna raske. Tegelikult ei pruugi olla liiga kaua aega varem vaja sisu jaotada mõnda divs ja libistage see paremale või vasakule, seejärel määrake laius, polster, marginaal, piirid jne.
Aga asjad on nüüd palju lihtsam CSS3 mitme tulbaga moodul. Nagu nimigi selgelt näitab, võimaldab see moodul jagada sisu ajalehtedes või ajakirjades näha olevasse veergu.
Brauseri tugi
Mitmes veerus on praegu toetatud kõik brauserid - Firefox 2+, Chrome 4+, Safari 3.1+ ja Opera 11.1 - välja arvatud, nagu prognoositud, Internet Explorer, kuid järgmine versioon IE10 tundub olevat alustanud selle mooduli toetamist.
Ülejäänud brauserite jaoks vajab Firefox veel tööd -moz- eesliide, samas kui Chrome ja Safari vajavad -webkit- eesliide. Opera ei nõua eesliiteid, et saaksime lihtsalt kasutada ametlikke omadusi.
Allikas: Millal saab kasutada CSS3 mitme veeru paigutust?
Loo mitu veergu
Enne veergude loomist oleme koostanud demonstratsiooniks mõned tekstiosad, mis on pakitud HTML5-sse silt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in Augue. Donec vel ajal dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. //ja nii edasi
… Ja täpsustage laius 600px stiili lehelt, see ongi nii.
Nüüd alustame veergude loomist.
Alltoodud näites jagame sisu kaks veergu koos veergude arv vara. See omadus ütleb brauserile, et see muudab sisu veerudeks määratud numbri järgi ja laseb brauseril otsustada iga veeru õige laiuse.
artikkel -webkit-column-count: 2; -moz-column-count: 2; veergude arv: 2;
Lisaks loenduse määratlemisele saab veerusid luua, määrates laiuse kasutades veeru laius vara ja lahkuvad brauserist, et otsustada, kui palju veerge tuleks luua.
Selles näites täpsustame veeru laiuse 150tk, mille tulemusena jagati sisu kolme veergu.
artikkel -moz-column-width: 150px; -webkit-veeru laius: 150 px; veeru laius: 150 px;
Nagu spec. veeru tegelik laius võib sõltuvalt ruumist olla laiem või kitsam kui määratud veeru laius. Samuti, kui laiuse väärtust ei ole selgesõnaliselt täpsustatud, siis “automaatne” võetakse vaikimisi, mis võib samuti tähendada “veergu pole”.
Veeru lõhe
Veeru lõhe määratleda ruumid, mis eraldavad iga veeru. Väärtuse väärtust saab märkida väärtuses em või px, kuid nagu on märgitud spec väärtus ei saa olla negatiivne. Allpool toodud näites täpsustame lünga 30tk, nii et kolonni vahelised ruumid näevad veidi laiemat.
artikkel -webkit-column-gap: 30px; -moz-kolonni vahe: 30 px; veeru vahe: 30 px;
Veeru reegel
Kui soovite veeru vahele lisada, saate seda kasutada veeru reegel vara, mis töötab väga sarnaselt piiri vara. Niisiis, ütleme, kui tahame panna punktiirjoone veeru vahele, saame kirjutada;
artikkel -moz-column-rule: 1px punktiir #ccc; -webkit-column-rule: 1px punktiir #ccc; veeru reegel: 1px punktiir #ccc;
Veeru span
See omadus töötab üsna sarnaselt colspan sisse tabel silt. Selle omaduse ühine rakendamine hõlmab sisu pealkirja kõikide veergude ulatuses. Siin on näide.
artikkel h1 -webkit-column-span: all; veergu: kõik;
Ülaltoodud näites määratlesime h1 kõigisse veergudesse ja kui veeru pikkus on määratud, 1 võetakse vaikimisi. Kahjuks töötab see kirjutamine selle kirjutamise ajal ainult Opera ja Chrome'is.
Lõplikud sõnad
See on kõik nüüd, oleme jõudnud läbi kõigi oluliste asjade, et luua mitu veergu CSS3-ga, ja nagu me juba alguses mainisime, töötab see moodul tänapäeva brauserites väga hästi, kuid see ei tööta veel Internet Exploreris.
Lõppkokkuvõttes loodame, et teil on nüüd üsna hea arusaam sellest, kuidas luua veerud CSS3-ga, ja kui teil on aega katsete tegemiseks, jagage oma meetodid ja tulemused allpool olevasse märkeruutu. Täname teid selle postituse lugemise ja lõbususe eest.
- Demo
- Allalaadimise allikas
