Kwiminyaka emininzi, i-CSS floats ibe yinto efanelekileyo, kodwa kuyimfuneko, ekwakheni izakhiwo zewebhusayithi. Ukuba uyilo lwenu lubizwa ngokuba lukholwana lwamakholomu, ubuye ujika . Ingxaki ngale ndlela yukuthi, nangona ubulumko obuyinkimbinkimbi ababenzi bewebhu / abaphuhlisi abonakalisiweyo ekwakheni izakhiwo eziyinkqubo eziyinkimbinkimbi, ukuthamba kwe-CSS akuzange kufunekiswe ukuba kusetyenziswe ngale ndlela.
Nangona ukuthambisa kunye nokubeka i-CSS kunesiqinisekiso sokuba nommandla kwi-design yewebhu iminyaka emininzi ezayo, ubuchule obutsha bohlobo oluquka i-CSS Grid ne-Flexbox ngoku banika abaqulunqi bewebhu iindlela ezintsha zokudala indawo yazo. Olunye uhlobo lwesakhiwo esitsha esibonisa ukuba luninzi lwezinto ezinokuba yi-CSS Multiple Columns.
Iikholomu ze-CSS ziye zadlulayo iminyaka embalwa ngoku, kodwa ukungabi ncediso kwiziphequluli ezindala (ikakhulukazi iinguqu ezakudala ze-Internet Explorer) zigcinwe ngabaqeqeshi abaninzi bewebhu ekusebenziseni le mizobo emsebenzini wabo wokuvelisa.
Ekupheleni kwenkxaso yeenguqulelo ezidala ze-IE, abanye abayili bewebhu bazama ukukhetha iindlela ezintsha zeCSS, iikhowudi ze-CSS zibandakanya, kwaye zifumanisa ukuba zinolawulo oluninzi ngalezi ndlela ezingcono kunokuba zenzelwa ukuhamba.
Iisiseko zekholomu zeCSS
Njengoko igama layo libonisa, iikhowudi ezininzi zeCSS (eyaziwa ngokuba yi-CSS3 layout columns layout) ikuvumela ukuba uhlukanise umxholo kwinani elihleliweyo lamakholomu. Iimpawu eziphambili zeCSS ozakuzisebenzisa zi:
- kubalo lwekholomu
- ikhefu-gap
Ukubala komqolo, ucacisa inani lamakholomu oyifunayo. Umgca wekholomu uza kuba ngamanzi okanye i-spacing phakathi kwezo kholam. Umkhangeli-zincwadi uza kuthatha la maxabiso kwaye ahlukanise umxholo ngokulinganayo kwinani lamakholomu ochazayo.
Umzekelo oqhelekileyo weikholomu ezininzi zeCSS ekusebenzeni kuya kuba ukwahlula ibhloko lezinto ezibhalwe ngetekisi kwiikholamu ezininzi, kufana noko uza kubona kwinqaku lephephandaba. Yithi unalo luhlu olulandelayo lwe-HTML (inqaku lokuba ngokomzekelo injongo, ndibeka kuphela isiqendu somhlathi omnye, ngelixa kusetyenziswa kukho imimandla emininzi yomxholo kule meko):
Isihloko seqendu lakho
Cinga imida emininzi yombhalo apha ...
Ukuba ngaba ubhale ezi ndlela zeCSS:
.ngeniso {-moz-ikholamu-count: 3; -bb-colum-count: 3; Inani lekholomu: 3; -moz-column-gap: 30px; I--bbkit-column-gap: 30px; i-col-gap: 30px; }Lo mgaqo weCSS uza kwahlula ukwahlula "umxholo" kwii-columns ezilinganayo ezi-3 kunye nepaki yeepikseli ezingama-30 phakathi kwazo. Ukuba ufuna iikholomu ezimbini endaweni ye-3, uzakutshintsha nje loo nto kwaye isiqulathi siza kubala ububanzi obutsha bezo kholamu ukuhlula umxholo ngokulinganayo. Qaphela ukuba sisebenzisa umthengisi-izakhiwo eziqhotyoshelweyo kuqala, zilandelwa zizivakalisi ezingabonakali ngaphambili.
Njengoko kulula, oku kusetyenziswe ngale ndlela kuphazamiseka kwi-website. Ewe, unokwazi ukwahlula isiqulatho somxholo kwiikholamu ezininzi, kodwa oku kungabi yinto efanelekileyo yokufunda kwiWebhu, ngokukodwa ukuba ukuphakama kwezi kholomu kuwela ngaphantsi kwe "pli" kwesikrini.
Abafundi baya kufuneka baqhube phezulu baze bahlawule ukuze bafunde umxholo opheleleyo. Sekunjalo, inqununu yamacwecwe eCSS ilula njengoko ubona apha, kwaye ingasetyenziselwa ukwenza okungaphezulu kunokuba nje ukwahlule umxholo wemihlathi ethile - inokwenene isetyenziswe kwisakhiwo.
Ubeko kunye neCSS Columns
Yithi unayo iphepha lewebhu kunye nomxholo womxholo onamakholomu amathathu omxholo. Le yindlela yokwakheka kwewebhusayithi, kwaye ukufezekisa iikholamu ezi-3, ngokuqhelekileyo uza kuhamba ngeentlukwano ezikhoyo. Ngeenkcukacha ezininzi ze-CSS, kulula kakhulu.
Nantsi isampuli HTML:
Iindaba ezidlulileyo
I-Content iya kuhamba apha ...
Ukusuka kwiBlog yethu
Ubungakanani buya kuhamba apha ...
Iimviwo ezizayo
Inqaku liya kuhamba apha ...
I-CSS yokwenza le mihlathi emininzi iqala ngokokubonayo ngaphambili:
.ngeniso {-moz-ikholamu-count: 3; -bb-colum-count: 3; Inani lekholomu: 3; -moz-column-gap: 30px; I--bbkit-column-gap: 30px; i-col-gap: 30px; }Ngoku, umceli apha kukuba, ekubeni isiphequluli sifuna ukwahlula oku ngqangi, ngoko ukuba ubude bomxholo bezo zihluko zihluke, loo mshicileli uya kunqumla umxholo wecandelo ngalinye, udibanise ukuqala kwalo kukho ikholamu enye kunye ngokuqhubeka nokuya kwenye (ungayibona oku ngokusebenzisa le khowudi ukuqhuba uvavanyo kwaye ungeze ubude obude bomxholo ngaphakathi kwecandelo ngalinye)!
Oko akusikho okufunayo. Ufuna ngalinye lala mahlulo ukuba lenze ikholam ehlukileyo kwaye, kungakhathaliseki ukuba umxholo omncinane okanye omncinane umxholo wesahluko, unokuze ufune ukwahlukana. Unokukufezekisa oku ngoku wongeza lo mgca owongezelelweyo weCSS:
div share {boniso: inline-block; }Oku kuya kunyanzelisa loo maqela angaphakathi "komxholo" ukuba ahlale ehambelane nje ngokuba umkhangeli unqumla le nto ibe ngamakholomu amaninzi. Kungcono, ekubeni asizange sinike nantoni apha ububanzi obunzulu, le mihlathi izakuhlala ngokuzenzekelayo njengokuba isiphequluli sitshintsha, senze isicelo esilungileyo sewebhu . Ngaloo ndlela "ifonti-block" isendaweni, ngasinye sahluko 3 siza kuba yikholamu ecacileyo yomxholo.
Ukusebenzisa ububanzi bekholomu
Kukho enye indawo ngaphandle kwe "kholomu-count" ongayisebenzisa, kwaye kuxhomekeke kwiimfuno zakho zokubeka, kungenokwenzeka ukuba kube yinto ekhethekileyo kwisayithi yakho. Lo "ububanzi bekholomu". Ukusebenzisa i-markup efanayo ye-HTML njengoko kuboniswe ngaphambili, sinokukwenza oku ngeCSS yethu:
.Ukufikelela {-moz-colum-width: 500px; -blog-width-width: 500px; ububanzi bekholomu: 500px; -moz-column-gap: 30px; I--bbkit-column-gap: 30px; i-col-gap: 30px; } .Ukwahlula ukwabelana {ukuboniswa: i-inline-block; }Indlela oku kusebenza ngayo ukuba isiphequluli sisebenzisa le "ububanzi bekholomu" njengexabiso eliphezulu lelo kholomu. Ngoko ukuba iwindi yowubhrawuzi ingaphantsi kwama-pixels angama-500 ububanzi, la mahlulo amathathu aya kubonakala kwikholam enye, enye yeentonga zomnye. Olu luhlobo oluqhelekileyo olwenzelwe iindawo ezisetyenzisiweyo zeselula / ezincinci.
Njengoko ububanzi beebrowser buyanda ukuba bukhulu ngokwaneleyo ukuze ludibanise iikholomu ezimbini kunye neengcambu zekholweyo ezicacisiweyo, umkhangeli-mkhangeli uzakuhamba ngokuzenzekelayo ukusuka kwikholam enye enye kwiikholam ezimbini. Qhubeka ukwandisa ububanzi bekrini kwaye ekugqibeleni, uza kufumana i-colum 3 yoyilo, kunye nezohlulo zethu ezintathu eziboniswe kwikholam yazo. Kwakhona, le yindlela enhle yokufumana iimpendulo ezinobungakanani , ezinobuninzi beefowuni , kwaye akufuneki ukuba usebenzise imibuzo yemidiya ukutshintsha izitayela zokuhlela!
Ezinye iimpahla zekholomu
Ukongeza kwipropati ephawulwe apha, kukho iipropati "zokulawula ikholomu", kuquka umbala, isita, kunye nobubanzi obubanzi obuvumela ukuba wenze imithetho phakathi kweikholomu zakho. Ezi ziza kusetyenziswa endaweni yemida ukuba ufuna ukuba neendlela ezithile ezahlula iikholomu zakho.
Ixesha lo kuhlola
Ngoku, iCSS Multiple Column Layout ixhaswa kakhulu. Ngama-prefixes, ngaphezu kwabangama-94% wabasebenzisi bewebhu baya kukwazi ukubona ezi zintlobo, kwaye elo qela elingasekelwa liza kuba yiinguqulelo ezindala ze-Internet Explorer apho ungasayi kuxhasa.
Ngale nqanaba yenkxaso ngoku ekhoyo, akukho sizathu sokuba ungaqalanga neCSS Columns kwaye ubeke ezi zintengiso kwiiwebhusayithi ezilungele ukuvelisa. Unokuqalisa iimvavanyo zakho usebenzisa i-HTML kunye ne-CSS eboniswe kweli nqaku kwaye udlale ngeenxa zonke ngeempawu ezahlukileyo ukuze ubone oko kuza kusebenza ngokusemgangathweni kwimiqathango yesayithi yakho.