Kwemakore mazhinji, CSS inofamba ichive yakagadzirisa, asi ichidikanwa, chikamu mukugadzira nzvimbo dzewebsite. Kana yako yakagadzirirwa yakadanwa mazamu akawanda, iwe wakatendeuka kuti unofamba . Dambudziko nenzira iyi ndeyokuti, pasinei nekunyanya kunyanzvi kwewebhu web designers / vakugadziri vakaratidza mukugadzira zvivakwa zvakaoma nzvimbo, CSS inofamba haina kumbobvira yakarongedzerwa kushandiswa nenzira iyi.
Kunyange zvazvo ichifambisa uye CSS kuiswa kune chokwadi chekuwana nzvimbo mumusikirwo webhuzha kwemakore akawanda ari kuuya, maitiro matsva ekugadzirisa anosanganisira CSS Grid neFlexbox vari kupa web designers nzira itsva dzekuita nzvimbo dzavo dzepaiti. Imwe nzira itsva yekugadzirisa inoratidza zvakawanda zvingave CSS Multiple Columns.
CSS Columns yakave yakapoteredza kwemakore mashomanana ikozvino, asi kushaikwa kwekutsigirwa kune vashandisi vakwegura (kunyanya zvinyorwa zvekare zveInternet Explorer) zvakachengetedza vashandi vakawanda vewebhu kubva kushandisa zvidhori mumabasa avo ekugadzira.
Nekuguma kwekutsigirwa kwevekare vashanduri veIE, vamwe vashandisi vewebhu vari kuedza nekusarudza zvitsva zveCSS, CSS Columns dzakabatanidzwa, uye kuwana kuti vane zvakawanda zvokutonga nemaitiro matsva aya kupfuura zvavakaita nekufamba.
The Basics of CSS Columns
Sezvo zita racho rinoratidzira, CSS Multiple Columns (inozivikanwawo seCSS3 yakawanda-colon-layout) inokubvumira kuparadzanisa zvigadziro mumutsetse wendima. Zvinhu zvakanyanya zvikuru zveCSS zvaungashandisa ndezvi:
- column-count
- column-gap
Nokuda kwekhoma-kuverenga, iwe unotsanangura nhamba yemakoroni waunoda. Nharaunda yekorodho ingadai iri magota kana kuti nzvimbo pakati pezvikamu. Mushanduri wacho achatora maitiro aya uye akaparadzanisa zvinyorwa zvakafanana nehuwandu hwemashoko iwe unotsanangura.
Muenzaniso wakafanana weCSS mutsara yakawanda mumutambo ungave kuparadzanisa bhokisi rezvinyorwa zvinyorwa muzvikamu zvakawanda, zvakafanana nezvamungaona munyaya yepapepanhau. Iti iwe une mazano e HTML anotevera (chinyorwa icho nenzira yechinangwa chinangwa, ndiri kungoisa kutanga kwemavara imwe chete, asi muchiito kunogona kunge kune ndima dzakawanda dzehuwandu mumuganhu uyu):
Nyaya yenyaya yako
Fungidzira zvakawanda zvemavara zvemashoko pano ...
Kana iwe wakanyora izvi zve CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; koromo-gap: 30px; }Uyu mutemo weCSS waizoparadzanisa "zvakagadzikana" kugoverana mumakamuri matatu akaenzana negeji yepikisikisi 30 pakati pavo. Kana iwe waida mapuranga maviri panzvimbo ye3, iwe ungangoshandura iyo kukosha uye shandukari inogona kuverenga hutsva hutsva hwemashoko aya kuti aparadzanise zvinyorwa zvakafanana. Cherechedza kuti tinoshandisa mutengesi-prefixed properties kutanga, kuteverwa nemashoko asina prefixed.
Sezvo zviri nyore sezvino izvi, kushandiswa kwayo nenzira iyi kunokonzerwa nekushandisa webhusaiti. Hongu, iwe unogona kuparadzanisa boka rezvinyorwa muzvikamu zvakawanda, asi izvi zvingave zvisina kuverenga zvakanakisisa kuWebhu, kunyanya kana kukwirira kwemakoroni aya kunowira pasi pe "pfu" yekona.
Vaverengi vaizofanira kupupurira kumusoro uye pasi kuitira kuti vaverenge zvakakwana. Kunyange zvakadaro, mukuru weCSS Columns iri nyore sezvamunoona pano, uye inogona kushandiswa kuita zvakawanda zvakadai kupfuura kungoparadzanisa zvinyorwa zvedzimwe ndima - zvinogona, zvechokwadi, kushandiswa pakugadzirisa.
Kurongwa neCSS Columns
Iti iwe une webhupu yehuwandu inzvimbo ine zvinyorwa zvitatu zvehuwandu. Iyi inonyanya kuenzaniswa newebsite, uye kuti uwane zvikamu zvitatu izvi, iwe unowanzoswededza mapoka ayo arimo. Ne CSS multiple-columns, zviri nyore kwazvo.
Heano pane imwe sampu HTML:
Nhau dzeSvondo
Zviripo zvaizoenda pano ...
Kubva muBlog yedu
Zviripo zvingaenda pano ...
Zviitiko Zvichauya
Zvingaitika pano ...
ICSS yekuita mahwendefa aya akawanda anotanga nezvakaona pakutanga:
.content {-moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; koromo-gap: 30px; }Iye zvino, dambudziko apa nderekuti, sezvo shanduro inoda kuparadzanisa zvinyorwa izvi zvakafanana, naizvozvo kana urefu hwehuwandu hwezvikamu izvi hwakasiyana, shanduro iyoyo ichapatsanura zvinyorwa zvekuparadzanisa kwevanhu, kuwedzera kutanga kwayo kune imwe column ipapo uchienderera kune imwe (iwe unogona kuona izvi uchishandisa kemo ino kuti uedze kuedza uye uwedzere urefu hwakasiyana hwehuwandu mukati mukati mega rega)!
Izvo handizvo zvaunoda. Iwe unoda imwe neimwe yezvikamu izvi kuti ugadzire chikamu chakasiyana uye, zvisinei kuti zvakakura kana zviduku zvakagadzikana zvakasiyana sei, iwe haumbodi kuti zviparadzaniswe. Iwe unogona kubudirira izvi nekuwedzera iyi imwe mutsara weCSS:
.content div {kuratidza: inline-block; }Izvi zvinomanikidza mapoka aya ari mukati me "zvakagadzikana" kuti arambe akashongedzwa kunyange sezvo shanduro ichi ichiparadzanisa izvi muzvikamu zvakawanda. Kunyange zviri nani, sezvo tisina kupa chinhu pano chakakosha, zvikamu izvi zvichangoerekana zvichishandura sezvo shanduro inoshandura, zvichiita kuti zvive zvakanaka pakushandirwa kwemawebsite . Neyo "inline-block" inzvimbo, nzvimbo imwe neimwe yezvikamu zvitatu ichave yakasiyana nemutsara wezviri mukati.
Achishandisa Column-Width
Pane imwe nzvimbo kunze kwe "column-count" yaunogona kushandisa, uye zvichienderana nehutano hwako, inogona kunge iine sarudzo yakanaka yewebsite yako. Ichi "chinyorwa-upamhi". Kushandisa imwechete ye HTML maringe sezvakaratidzwa kare, tinogona kuita izvi neCSS yedu:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; shongwe-yakakura: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; koromo-gap: 30px; ▣ mutauriri div {kuratidza: inline-block; }Nzira iyo inoshanda iyo iyo shanduro inoshandisa iyi "column-width" sehuwandu hukuru hwendarama iyoyo. Saka kana firiji rekushandura iri pasi pemakisikisi mazana mashanu, zvikamu zvitatu izvi zvingaonekwa mune imwe korombo, imwe yepamusoro yeimwe. Iyi ndiyo inowanzoshandiswa kushandiswa kwemafaira / zviduku.
Sezvo shanduro yakakura inowedzera kuti ive yakakura zvokuti inokwana mapuranga maviri pamwe chete nemapapiro akataurwa, muchengeti wacho achangoerekana achibva pane imwe sendumende yekugadzika kusvika kune miviri miviri. Ramba uchiwedzera kuvharidza kwehwindo uye pakupedzisira, iwe uchawana 3 koroni yekugadzirisa, uye rimwe nerimwe rezvikamu zvitatu zvakaratidzwa mumutsetse wavo. Zvakare, iyi ndiyo nzira yakanakisisa yekuwana dzimwe nzira dzakagamuchirwa dzakagadzikana, dzakasiyana- siyana, uye hausatombofaniri kushandisa mashizha emagetsi kuti uchinje mitambo yekugadzirisa!
Zvimwe Zvinyorwa zveColumn
Mukuwedzera kune zvakaputirwa pano, panewo nzvimbo ye "column column-rule", kusanganisira marara, mararamiro, uye hupamhi hutsika dzinokubvumira kuti uite mitemo pakati pemakamuri ako. Izvi zvingashandiswa panzvimbo yemiganhu kana iwe uchida kuva nedzimwe mitsara iri kuparadzanisa mapuranga ako.
Nguva yekuongorora
Pari zvino, CSS Multiple Column Layout inonyatsotsigirwa. Nezvakaitika kare, vanopfuura 94% vevashandisi vewebhu vaizogona kuona michina iyi, uye boka iro risina kutsigirwa raizongodaro rive shanduro dzakakura dzeInternet Explorer izvo iwe ungasave uchitsigira zvakare.
Nehuwandu hwekutsigira ikozvino munzvimbo, hapana chikonzero chekutanga kuedza neCSS Columns uye kutumira maitiro aya mukugadzira mawebsite akakodzera. Iwe unogona kutanga zvidzidzo zvako uchishandisa HTML neCSS inowanikwa munyaya ino uye uchitamba-svetana nemitemo yakasiyana-siyana kuti uone kuti chii chingazoshanda zvakanyanya pane zvido zvesaiti yako.