Iminyaka eminingi, ukuhamba kwe-CSS kube yinto eyigugu, kodwa edingekayo, ekudaleni izakhiwo zewebhusayithi. Uma ngabe ukuklama kwakho kudinga amakholomu amaningi, ubuphendukele ekutheni . Inkinga ngale ndlela yukuthi, naphezu kokuhlakanipha okungaqondakali ukuthi abakhiqizi bewebhu / abathuthukisi bakhombise ekudaleni izakhiwo eziyinkimbinkimbi, ama-floppy CSS ayengakaze asetshenziswe ngempela ngale ndlela.
Ngenkathi kuhamba futhi ukubeka i-CSS kuqinisekile ukuthi kunendawo yokuklama wewebhu iminyaka eminingi ezayo, amasu omdwebo amasha kuhlanganise ne-CSS Grid ne-Flexbox manje unikeza abakhi bewebhu izindlela ezintsha zokudala izakhiwo zabo zesayithi. Enye indlela yokuhlela entsha ebonisa okuningi okungenzeka yi-CSS Multiple Columns.
Amakholomu e-CSS asebenze iminyaka embalwa manje, kodwa ukungabi nesekelo kuziphequluli ezindala (ikakhulukazi izinguqulo ezindala ze-Internet Explorer) kugcinwe ochwepheshe abaningi bewebhu ukusebenzisa lezi zitayela emsebenzini wabo wokukhiqiza.
Ngokuphela kokusekelwa kwalezo zinguquko ezindala ze-IE, abanye abaklami bewebhu manje bazama ukukhethwa kwezinketho ezintsha ze-CSS, amakholomu we-CSS afakiwe, nokuthola ukuthi banokulawula okungaphezulu ngalezi zindlela ezintsha kunalokho abazenzayo.
Okuyisisekelo se-CSS Columns
Njengoba igama layo liphakamisa, i-CSS Multi Columns (eyaziwa nangokuthi isakhiwo sekholomu e-CSS3) ikuvumela ukuthi uhlukanise okuqukethwe kube yinombolo yamakholomu. Izakhiwo eziyisisekelo kakhulu ze-CSS ongayisebenzisa yizo:
- ikholomu-count
- ikholomu-gap
Ukuze uthole ikholomu-count, ucacisa inani lamakholomu oyifunayo. Igebe lekholomu lizoba ngamagundane noma isikhala phakathi kwalezo zikholomu. Isiphequluli sizothatha lezi zimiso futhi sihlukanise okuqukethwe ngokulinganayo kwinombolo yamakholomu owacacisayo.
Isibonelo esivamile se-CSS amakholomu amaningi ekusebenzeni kungaba ukwehlukanisa okubhaliwe kokuqukethwe kombhalo kumakholomu amaningi, afana nalokho ongakubona esithombeni sephephandaba. Yisho ukuthi unomkhawulo we-HTML olandelayo (inothi ukuthi ngenhloso yezibonelo, ngifaka ukuqala kwesigaba esisodwa, ngenkathi kusetshenziswe kungenzeka kube nezindima eziningi zokuqukethwe kule marki):
Isihloko sendaba yakho
Cabanga okuningi kwezigaba zombhalo lapha ...
Uma ubhale lezi zitayela ze-CSS:
.Umhlangano {-moz-ikholomu-count: 3; -webkit-ikholomu-count: 3; ikholomu-count: 3; -moz-ikholomu-gap: 30px; -webkit-ikholomu-gap: 30px; ikholomu-igebe: 30px; }}Lo mbuso we-CSS uzohlukanisa ukwahlukana "kokuqukethwe" kube ngamakholomu angu-3 alinganayo negebe lama-pixel angu-30 phakathi kwawo. Uma ngabe ufuna amakholomu amabili esikhundleni se-3, uzovele ushintshe lelo xabiso futhi isiphequluli sizobala ububanzi obusha balawo kholomu ukuhlukanisa okuqukethwe ngokulinganayo. Qaphela ukuthi sisebenzisa izindawo zokuthengisa-prefixed kuqala, zilandelwa izimemezelo ezingezona prefixed.
Njengoba kulula njengalokhu, ukusetshenziswa kwayo ngale ndlela kuyabuza ukusetshenziswa kwewebhusayithi. Yebo, ungahlukanisa uhla lwezinto ezinamakholomu amaningi, kodwa lokhu kungase kungabi yi-experience engcono kakhulu yokufunda yeWebhu, ikakhulukazi uma ukuphakama kwalezi kholomu kuwela ngaphansi "kokuphanga" kwesikrini.
Abafundi kuzodingeka baqhubekele phezulu bese phansi ukuze bafunde okuqukethwe okugcwele. Noma kunjalo, inhloko ye-CSS Columns ilula njengoba ubona lapha, futhi ingasetshenziselwa ukwenza okungaphezulu nje kokuhlukanisa okuqukethwe kwezinye izigaba - ingabe isetshenziselwa ukuhlela.
Ukuhlelwa Ngekholomu Ye-CSS
Tshela ukuthi unekhasi lewebhu elinendawo yokuqukethwe enamakholomu amathathu okuqukethwe. Lokhu kuyisimo sewebhu esivamile kakhulu, futhi ukufeza lezo zinsika ezingu-3, ngokujwayelekile uzothambisa izinhlaka ezikuyo. Ngezinsika eziningi ze-CSS, kulula kakhulu.
Nansi isampula HTML:
Izindaba Ezintsha
Okuqukethwe kuzoya lapha ...
Kubhulogi lethu
Okuqukethwe kuzoya lapha ...
Imicimbi ezayo
Okuqukethwe kuzoya lapha ...
I-CSS yokwenza lezi kholomu eziningi ziqala ngalokho okubonayo ngaphambilini:
.Umhlangano {-moz-ikholomu-count: 3; -webkit-ikholomu-count: 3; ikholomu-count: 3; -moz-ikholomu-gap: 30px; -webkit-ikholomu-gap: 30px; ikholomu-igebe: 30px; }}Manje, inselelo lapha yilokho, ngoba isiphequluli sifuna ukwahlukanisa ngokulinganayo lokhu okuqukethwe, ngakho uma ubude bokuqukethwe kwalezi zingxenye zihlukile, leso siphequluli sizohlukanisa ngempela okuqukethwe kwesigaba ngasinye, sengeze ukuqala kuso kukholomu eyodwa bese uqhubeka ungena kwenye (ungabona lokhu ngokusebenzisa le khodi ukuqhuba ukuhlolwa bese wengeza ubude obuhlukene bokuqukethwe ngaphakathi kwesigaba ngasinye)!
Akukhona lokho okufunayo. Ufuna ngayinye yalezi zigaba ukudala ikholomu ehlukile futhi, kungakhathaliseki ukuthi okuqukethwe okungakanani noma okuncane kunoma yikuphi ukwahlukana komuntu ngamunye, awufuni ukuthi kuhlukaniswe. Ungakwazi ukufezekisa lokhu ngokungeza le namba eyodwa eyengeziwe ye-CSS:
div div. {ukubonisa: inline-block; }}Lokhu kuzophoqelela lezo zigaba ezingaphakathi "kokuqukethwe" ukuthi zihlale ziqinile ngisho njengoba isiphequluli sihlukanisa lokhu kube ngamakholomu amaningi. Ngcono nakakhulu, njengoba singanikanga lutho lapha ububanzi obuhleliwe, lezi zikholomu zizobe zishintshashintsha ngokuzenzakalelayo njengoba isiphequluli sishintshashintsha, okwenza kube isicelo esihle kumawebhusayithi aphenduleyo . Ngaleso sitayela se-inline block, indawo ngayinye yezingxenye zakho ezi-3 izoba ikholomu ehlukile yokuqukethwe.
Ukusebenzisa i-Column-Width
Kukhona enye indawo ngaphandle kokuthi "ikholomu-count" ongayisebenzisa, futhi kuye ngokuthi izidingo zakho zenzelwe, kungase kube yiyona ndlela engcono isayithi lakho. Lena "ikholomu-ububanzi". Ukusebenzisa imakethe efanayo ye-HTML njengoba kuboniswe ngaphambilini, singakwenza esikhundleni salokhu nge-CSS yethu:
.Isivumelwano {-moz-ikholomu-ububanzi: 500px; -webkit-ikholomu-ububanzi: 500px; ikholomu-ububanzi: 500px; -moz-ikholomu-gap: 30px; -webkit-ikholomu-gap: 30px; ikholomu-igebe: 30px; } .i-div div {ukubonisa: inline-block; }}Indlela okusebenza ngayo ukuthi isiphequluli sisebenzisa le "kholomu-ububanzi" njengenani eliphakeme lekholomu. Ngakho uma iwindi lesiphequluli lingamaphikseli angaba ngu-500 ububanzi, lezi zingxenye ezintathu zizovela kukholomu eyodwa, enye yeziqongweni zomunye. Lena isakhiwo esivamile esetshenziselwa izakhiwo zeselula / ezincane zesikrini.
Njengoba ububanzi besiphequluli banda ukuba bukhulu ngokwanele ukulingana namakholomu angu-2 kanye namaphakheji ekholomu ecacisiwe, isiphequluli sizohamba ngokuzenzakalelayo ukusuka kwesakhiwo sekholomu eyodwa kuya kwamakholomu amabili. Qhubeka ukwandisa ububanzi bekrini futhi ekugcineni, uzothola ukuklanywa kwekholomu engu-3, ngasinye sezingxenye zethu ezintathu eziboniswe kukholomu yazo. Futhi, lokhu kuyindlela enhle yokuthola izakhiwo ezinobungane , ezihlukahlukene , nezimboni eziningi , futhi awudingi ngisho nokusebenzisa imibuzo yemidiya ukushintsha izitayela zesakhiwo!
Ezinye izimpahla zekholomu
Ngaphandle kwezakhiwo ezihlanganiswe lapha, zikhona nezakhiwo ze "ikholomu-ukubusa", kufaka phakathi amanani, isitayela, namanani obubanzi okuvumela ukuthi udale imithetho phakathi kwamakholomu wakho. Lezi zingasetshenziswa esikhundleni semingcele uma ufuna ukuba neminye imigqa ehlukanisa amakholomu akho.
Isikhathi sokuzama
Njengamanje, ukuhlelwa kwekholomu ye-CSS Multiple kusekelwa kakhulu. Ngama-prefixes, abasebenzisi abangaphezu kuka-94% bewebhu bazokwazi ukubona lezi zitayela, futhi lelo qembu elingasekelwa lizoba yizinguqulo ezindala kakhulu ze-Internet Explorer okungenzeka ukuthi zingase zisekela noma kunjalo.
Ngalesi sezinga lokusekela manje endaweni, asikho isizathu sokuthi uqale ukuzama nge-CSS Columns futhi uthumela lezi zitayela kumawebhusayithi akhiqiziwe okukhiqiza. Ungaqala ukuhlolwa kwakho usebenzisa i-HTML ne-CSS ethunyelwe kulesi sihloko futhi udlale nxazonke ngamanani ahlukile ukubona ukuthi yini ezosebenza kangcono ukuthi isakhiwo sesayithi lakho sifune.