Sannado badan, CSS waxay ku faantaa inay ahaato mid halis ah, laakiin loo baahdo, qayb ka mid ah abuurista bogagga. Haddii naqshaddaada loogu yeedho columo kala duwan, waxaad u soo jeestay inaad ku nasto . Dhibaatada ku jirta habkani waa, inkasta oo ay tahay waxqabad aan fiicnayn oo ah in naqshadeentayaasha websaydhku ay muujiyeen abuurista goobo adag oo adag, CSS-du waxay u socotaa waligeed loola jeedo in loo isticmaalo habkan.
Inkasta oo jajabinta iyo jagooyinka CSS ay hubinayaan in ay leeyihiin meel ku jirta naqshadda webka sanado badan oo soo socota, farsamooyin cusub oo cusub oo ay ka mid yihiin CSS Grid iyo Flexbox hadda waxay siinayaan naqshadeeyayaasha websaydha qaabab cusub oo abuura habka boggooda. Farsameyn kale oo cusub oo muujinaya suurtogalnimada badan waa CSS Multiple Columns.
CSS Columns waxay ku dhowyihiin dhowr sano ka hor, laakiin taageerada la'aanta dookheyaal waayeel ah (badanaa qaybo badan oo Internet Explorer ah) ayaa haya xirfadlayaal badan oo websaydh ah iyagoo isticmaalaya noocyada noocaas ah ee shaqadooda soo-saarka.
Dhamaadka taageerada ugu weyn ee IE, qaar ka mid ah naqshadayaasha websaydhka ayaa hadda tijaabinaya fursadaha cusub ee CSS qaabaynta, CSS Columns ku jira, iyo inay ogaadaan inay haystaan xakameyn badan oo badan oo leh hababkan cusub marka loo eego siddoo kale.
Astaamaha CSS Columns
Madaama magaciisu soo jeedinayo, CSS Multiple Columns (oo loo yaqaan CSS3 qaabaynta qaybaha badan) waxay kuu oggolaaneysaa inaad u kala qeybiso nambarada tiro taxdo ah. Qalabka CSS ee aasaasiga ah ee aad isticmaali doonto waa:
- tiir-tirin
- farqiga u dhexeeya
Qiyaasta tirinta-xisaabeedka, waxaad qeexaysaa tirada sirta aad rabto. Farqiga tiirkiisu wuxuu noqonayaa xargaha ama xawaaraha u dhexeeya columooyinkan. Browserku wuxuu qaadanayaa qiyamkaas oo wuxuu u kala qaybiyaa mugga si siman tirada tirada ee aad sheegeyso.
Tusaale ahaan CSS-ga badan ee ku dhaqanka ah ee ku dhaqanka waa inuu kala qaybqaybiyo qoraalka qoraalka ah ee looxyo badan, oo la mid ah wixii aad ku arki lahayd wargeyska. U sheeg inaad haysato calaamadda HTML ee soo socota (xusuuso in tusaale ahaan ujeedo, waxaan kaliya ku soo rogayaa bilawga hal cutub, halka ficil ahaantu ay u badan tahay in ay noqon doonto qaybo badan oo ka mid ah waxyaabaha ku jira calaamaddan):
Ku dhaji maqaalkaagaKa fikir sawirada badan ee qoraalka halkan ...
Haddii aad ku qorto hababka CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; tiir xisaabeedka: 3; -mose-farabadan: 30px; -waxbarashada farqiga u dhexeeya: 30px; farqiga ujeedka: 30px; }Qodobkan CSS wuxuu u kala qaybin doonaa qaybta "content" ee 3 isbarbardhiga isla markaana leh farqiga 30 pixels oo u dhexeeya iyaga. Haddii aad rabto laba kabaan halkii aad ka ahayd 3, waxaad si fudud u bedeli lahayd qiimahaas iyo shabakadu waxay xisaabin doontaa ballaarada cusub ee iskuxidhayaashaas si ay si siman u kala qaybiyaan content. Fiiro u yeelo inaanu adeegsano guryaha horay loo-soo hor-mariyey, oo ay ku xigto cadeyn aan horey loo soo dhejin.
Sida ugu fudud ee tan waa, isticmaalka habkan waa su'aal loo isticmaalo bogga. Haa, waxaad u kala qaybin kartaa farabadan oo ku jira qaybo badan, laakiin tani ma noqon karto waayo-aragnimada ugu wanaagsan ee akhriska ee Webka, gaar ahaan haddii dhererkoodu uu ka hooseeyo "laab" shaashadda.
Akhriyeyaashu waxay markaa ubaahanyihiin inay kor u kaco si ay u akhristaan sheekada oo dhan. Weli, maamulaha CSS Columns waa mid fudud sida aad halkan ku aragtid, waxaana loo isticmaali karaa in la sameeyo wax badan oo ka badan kaliya kala qaybsanaanta qaybaha qaar ka mid ah - waa, dhab ahaantii, loo isticmaali karo qaabeynta.
Layout Iyadoo CSS Columns
U sheeg in aad heysato bog internet leh oo leh aalado leh 3 qaybood oo ka kooban content. Tani waa qaab muuqaal ah oo website ah, iyo in lagu gaaro kuwaa 3-tiir, waxaad caadi ahaan u jajabin doontaa qaybaha ku jira. Iyadoo leh CSS-ka badan, waa mid aad u fudud.
Waa kuwan tusaalooyin HTML ah:
Wararkii ugu dambeeyay ee
Maqaalkani wuxuu halkan u aadayaa ...
Dhacdooyinka soo socda
CSS-da si ay u sameeyaan tiiraradan kala duwan waxay ku bilaabmayaan waxa aad hore u aragtay:
.content {-moz-column-count: 3; -webkit-column-count: 3; tiir xisaabeedka: 3; -mose-farabadan: 30px; -waxbarashada farqiga u dhexeeya: 30px; farqiga ujeedka: 30px; }Hadda, caqabada halkan waa tan, maadaama browserku rabo in uu qaybiyo mowqifkani si siman, sidaas darteed haddii dhererka qaybta ka mid ah qaybahan kala duwan yahay, shabakadda ayaa dhab ahaantii kala qaybin doonta qaybta qaybta shakhsi ahaaneed, marka lagu daro bilawga halbeeg iyo kadibna sii wad (kale ayaad ku arki kartaa adiga oo isticmaalaya nambarkan si aad u tijaabiso tijaabada oo ku dar dhererooyin kala duwan oo ah qaybaha kala duwan)!
Taasi maaha waxaad rabto. Waxaad rabtaa mid kasta oo ka mid ah qaybahaan si ay u abuuraan tiir aan kala duwaneyn, iyada oo aan loo eegin sida ay u weyn tahay ama qayb yar ee qaybaha shakhsi ahaaneed ee ay noqon karto, marna ma rabto inay kala qaybsanto. Waxaad ku gaari kartaa tan adoo ku daraya hal xariiq oo dheeraad ah ee CSS:
.content div {bandhig: inline-block; }Tani waxay ku qasbi doontaa qaybaha ku jira gudaha "content" in ay is dhistaan xitaa marka browserku u kala soocayo qaybo badan. Xitaa ka sii wanaagsan, maadaama aanaan waxba ku siinin woxoogaa go'an, tirooyinkani waxay si toos ah u bedeli doonaan sida bareebka dib u habeyn, iyaga oo ka dhigaya codsi ku habboon bogagga internetka . Iyada oo qaabka "khadka tooska ah" ah, mid walba oo ka mid ah 3 qaybood ayaa noqon doona qayb ka mid ah qaybaha kala duwan.
Isticmaalida Column-Width
Waxaa jira hanti kale oo aan ahayn "column-count" oo aad isticmaali karto, iyada oo ku xidhan baahidaada qorshahaaga, waxay noqon kartaa doorasho wanaagsan oo loogu talagalay boggaaga. Tani waa "width column". Iyadoo la adeegsanayo calaamadda HTML ee la midka ah sida hore loo muujiyay, waxaan halkan ku samayn karnaa CSS:
.content {-moz-column-width: 500px; -webkit-width-width: 500px; width column: 500px; -mose-farabadan: 30px; -waxbarashada farqiga u dhexeeya: 30px; farqiga ujeedka: 30px; } .content div {bandhig: inline-block; }Habka ay tani u shaqeyneyso waa in shabakadu isticmaasho "column-width" oo ah qiimaha ugu sarreeya ee qaybtaas. Sidaa daraadeed haddii daaqaduhu ay ka yaryihiin 500 pixels oo ballaaran, saddex qaybood ayaa ka muuqan doona hal tiir, mid ka mid ah dusha sare ee kale. Tani waa layma caadi ah oo loo isticmaalo qaababka moobiilka / shaashadaha yar yar.
Maadaama baaxadda guud ay kor u kacayso si ay u noqoto mid weyn oo ku habboon 2 xagal ay la socoto barta bidix ee la cayimay, browserku wuxuu si toos ah uga socon doonaa halbeeg joogta ah ilaa laba kabadan. Ku sii wad kordhinta shaashadda iyo ugu dambeyntii, waxaad heli doontaa 3 qaybood oo ah qaabka, oo leh mid kasta oo ka mid ah saddexda qaybood ee lagu soo bandhigay tiirkooda. Mar labaad, tani waa hab weyn oo lagu heli karo qaar ka mid ah qaababka wax ku oolka ah, qalab badan oo qalabaysan , oo xitaa uma baahnid inaad isticmaasho su'aalaha warbaahinta si aad u bedesho qaababka qaabka!
Qaybaha Kale ee Kale
Marka laga reebo dhismooyinka halkan lagu daboolay, waxaa kale oo jira waxyaabo "column-rule", oo ay ka mid yihiin midabka, qaabka, iyo qiyamka ballaaran ee kuu oggolaanaya inaad abuurto xeerar ka dhexeeya shaxankaaga. Kuwani waxaa loo isticmaali doonaa halkii xuduudaha haddii aad rabto in aad hayso khadadka qaar ka soocaya xayndaabkaaga.
Waqtiga Tijaabada
Waqtigaan, Cout Multiple Column Layout waa mid aad u fiican. Iyada oo horey loo soo qaaday, in ka badan 94% isticmaalayaasha webka waxay arki karaan noocyada noocan ah, iyo kooxda aan la taageereynin dhab ahaantii waxay noqon doonaan noocyada ugu weyn ee Internet Explorer oo aan laga yaabo inaadan waligaa taageerin.
Iyada oo heerka taageerada hadda jira, ma jirto sabab aan u bilaabin tijaabinta CSS Columns iyo in ay u diraan noocyada noocan ah ee wax-soosaarka internetka ee diyaarinta. Waxaad bilaabi kartaa tijaabooyinkaaga adoo isticmaalaya HTML iyo CSS ee lagu soo bandhigay maqaalkani oo ka ciyaaraya qiime kala duwan si aad u aragto waxa ugu fiican ee u baahnaanta baahida loo qabo goobta.