Sa loob ng maraming taon, ang CSS floats ay naging isang maselan, kailangan pa, bahagi sa paglikha ng mga layout ng website. Kung ang iyong disenyo ay tinatawag na para sa maraming mga haligi, naka-on ka sa mga kamay . Ang problema sa pamamaraang ito ay, sa kabila ng hindi kapani-paniwala na katalinuhan na ipinakita ng mga designer / developer ng web sa paglikha ng mga kumplikadong layout ng site, ang mga float ng CSS ay hindi kailanman talagang sinadya upang gamitin sa ganitong paraan.
Habang ang mga kamay at pagpoposisyon ng CSS ay sigurado na magkaroon ng isang lugar sa disenyo ng web para sa maraming taon na darating, ang mga mas bagong diskarte sa layout kabilang ang CSS Grid at Flexbox ay nagbibigay ngayon ng mga designer ng web ng mga bagong paraan upang lumikha ng kanilang mga layout ng site. Ang isa pang bagong pamamaraan ng layout na nagpapakita ng maraming potensyal ay CSS Multiple Columns.
Ang CSS Columns ay nakapalibot sa loob ng ilang taon na ngayon, ngunit ang kakulangan ng suporta sa mas lumang mga browser (higit na mas lumang mga bersyon ng Internet Explorer) ay pinananatiling maraming mga propesyonal sa web mula sa paggamit ng mga estilo na ito sa kanilang gawaing paggawa.
Sa pagtatapos ng suporta para sa mga mas lumang bersyon ng IE, ang ilang mga taga-disenyo ng web ay nag-eeksperimento na ngayon sa mga bagong layout ng CSS pagpipilian, CSS Columns kasama, at sa paghahanap na mayroon silang higit na kontrol sa mga bagong diskarte kaysa sa ginawa nila sa mga kamay.
Ang Mga Pangunahing Kaalaman ng CSS Mga Haligi
Bilang nagmumungkahi ang pangalan nito, ang CSS Maramihang Mga Hanay (kilala rin bilang layout ng CSS3 multi-haligi) ay nagbibigay-daan sa iyong hatiin ang nilalaman sa hanay ng mga haligi. Ang mga pangunahing katangian ng CSS na gagamitin mo ay:
- count-count
- haligi-puwang
Para sa haligi-count, tinukoy mo ang bilang ng mga haligi na gusto mo. Ang puwang na puwang ay ang mga gutters o spacing sa pagitan ng mga haligi na iyon. Dadalhin ng browser ang mga halagang ito at hatiin ang nilalaman nang pantay-pantay sa bilang ng mga haligi na iyong tinukoy.
Ang isang karaniwang halimbawa ng CSS maraming mga haligi sa pagsasanay ay upang hatiin ang isang bloke ng nilalaman ng teksto sa maraming mga haligi, katulad ng kung ano ang makikita mo sa isang artikulo sa pahayagan. Sabihin na mayroon kang sumusunod na markup ng HTML (tandaan na para sa mga layunin ng halimbawa, inilalagay ko lamang ang simula ng isang talata, habang sa pagsasanay ay malamang na maraming mga talata ng nilalaman sa markup na ito):
Ang heading ng iyong artikulo
Isipin ang maraming mga talata ng teksto dito ...
Kung sinulat mo ang mga estilo ng CSS na ito:
.content {-moz-column-count: 3; -webkit-column-count: 3; count-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; haligi-puwang: 30px; }Ang pamantayan ng CSS na ito ay hahatiin ang "nilalaman" na dibisyon sa 3 magkatulad na haligi na may puwang ng 30 pixel sa pagitan nila. Kung nais mo ang dalawang haligi sa halip na 3, babaguhin mo lang ang halaga na iyon at ang kalkula ay kalkulahin ng browser ang mga bagong lapad ng mga haliging iyon upang hatiin ang nilalaman nang pantay-pantay. Pansinin na ginagamit namin muna ang mga prefix na katangian ng vendor, na sinusundan ng mga di-prefix na deklarasyon.
Bilang madaling bilang ito ay, ang paggamit nito sa ganitong paraan ay kaduda-dudang para sa paggamit ng website. Oo, maaari mong hatiin ang isang grupo ng nilalaman sa maraming mga hanay, ngunit maaaring hindi ito ang pinakamahusay na karanasan sa pagbabasa para sa Web, lalo na kung ang taas ng mga hanay na ito ay bumaba sa ibaba ng "fold" ng screen.
Ang mga mambabasa ay kailangang mag-scroll pataas at pababa upang mabasa ang buong nilalaman. Gayunpaman, ang punong-guro ng Mga Haligi ng CSS ay kasingdali ng iyong nakikita dito, at maaari itong magamit upang magawa ito nang higit pa kaysa sa paghati-hatiin lamang ng nilalaman ng ilang mga talata - maaaring magamit ito para sa layout.
Layout Gamit ang CSS Columns
Sabihin na mayroon kang isang webpage na may isang lugar ng nilalaman na may 3 haligi ng nilalaman. Ito ay isang pangkaraniwang layout ng website, at upang makamit ang mga 3 haligi, karaniwan mong lumulutang ang mga dibisyon na naroroon. Sa maraming mga haligi ng CSS, ito ay lubhang mas madaling.
Narito ang ilang sample HTML:
Mga Paparating na Kaganapan
Ang nilalaman ay pupunta rito ... p>
Ang CSS upang gawin ang mga maramihang hanay na ito ay nagsisimula sa kung ano ang iyong nakita dati:
.content {-moz-column-count: 3; -webkit-column-count: 3; count-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; haligi-puwang: 30px; } Ngayon, ang hamon dito ay na, dahil nais ng browser na hatiin ang nilalaman na ito nang pantay-pantay, kaya kung ang haba ng nilalaman ng mga dibisyon ay iba, ang browser na iyon ay aktwal na hahatiin ang nilalaman ng isang indibidwal na dibisyon, pagdaragdag ng simula nito sa isang haligi at pagkatapos ay magpatuloy sa isa pang (maaari mong makita ito sa pamamagitan ng paggamit ng code na ito upang magpatakbo ng isang eksperimento at magdagdag ng iba't ibang mga haba ng nilalaman sa loob ng bawat dibisyon)!
Hindi iyan ang gusto mo. Gusto mo ang bawat isa sa mga dibisyon na lumikha ng isang natatanging haligi at, gaano man malaki o maliit ang nilalaman ng isang indibidwal na dibisyon, hindi mo ito nais na mahati. Maaari mong makamit ito sa pamamagitan ng pagdaragdag ng isang karagdagang linya ng CSS:
.content div {display: inline-block; } Pipilitin nito ang mga dibisyon na nasa loob ng "nilalaman" upang manatiling buo kahit na binabahagi ito ng browser sa maraming hanay. Kahit na mas mahusay, dahil hindi namin ibinigay ang anumang bagay dito sa isang nakapirming lapad, ang mga haligi na ito ay awtomatikong baguhin ang laki ng bilang ng browser resizes, paggawa ng mga ito ng isang perpektong application para sa tumutugon mga website . Sa puwang na "inline-block" na estilo, ang bawat isa sa iyong 3 dibisyon ay magiging isang natatanging haligi ng nilalaman.
Paggamit ng Haligi-Lapad
May isa pang ari-arian bukod sa "haligi-count" na magagamit mo, at depende sa iyong mga pangangailangan sa layout, maaaring ito ay talagang isang mas mahusay na pagpipilian para sa iyong site. Ito ay "haligi-lapad". Gamit ang parehong markup ng HTML tulad ng ipinakita dati, maaari naming gawin ito sa pamamagitan ng aming CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; haligi-lapad: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; haligi-puwang: 30px; }. nilalaman div {display: inline-block; } Ang paraan na ito ay gumagana ay na ang browser ay gumagamit ng "haligi-lapad" bilang ang pinakamataas na halaga ng hanay na iyon. Kaya't kung ang window ng browser ay mas mababa sa 500 pixel ang lapad, ang mga 3 dibisyon ay lilitaw sa isang haligi, isa sa mga tops ng isa pa. Ito ay isang tipikal na layout na ginagamit para sa mga layout ng mobile / maliit na screen.
Tulad ng pagtaas ng lapad ng browser upang maging sapat na malaki upang magkasya ang 2 mga haligi kasama ang tinukoy na mga puwang ng haligi, awtomatikong dadalhin ng browser mula sa isang solong hanay ng haligi sa dalawang haligi. Panatilihin ang pagtaas ng lapad ng screen at sa huli, makakakuha ka ng isang 3 disenyo ng haligi, sa bawat isa sa aming 3 dibisyon na ipinapakita sa kanilang sariling hanay. Muli, ito ay isang mahusay na paraan upang makakuha ng ilang tumutugon, friendly na layout ng multi-device , at hindi mo na kailangang gamitin ang mga query sa media upang baguhin ang mga estilo ng layout!
Iba pang Mga Properties sa Haligi
Bilang karagdagan sa mga katangian na sakop dito, mayroon ding mga katangian para sa "haligi-panuntunan", kabilang ang kulay, estilo, at mga halaga ng lapad na nagbibigay-daan sa iyo upang lumikha ng mga panuntunan sa pagitan ng iyong mga haligi. Ang mga ito ay gagamitin sa halip na mga hangganan kung nais mong magkaroon ng ilang mga linya na naghihiwalay sa iyong mga haligi.
Oras sa Eksperimento
Sa kasalukuyan, ang CSS Maramihang Layout ng Hanay ay napakahusay na sinusuportahan. Sa mga prefix, higit sa 94% ng mga gumagamit ng web ang makakakita ng mga estilo na ito, at ang hindi suportadong grupo ay talagang magiging mas lumang bersyon ng Internet Explorer na hindi mo maaaring sinusuportahan pa rin.
Sa antas na ito ng suporta ngayon sa lugar, walang dahilan upang hindi magsimulang mag-eksperimento sa CSS Mga Haligi at i-deploy ang mga estilo na ito sa mga handa na website ng produksyon. Maaari mong simulan ang iyong mga eksperimento gamit ang HTML at CSS na ipinakita sa artikulong ito at maglaro sa paligid na may iba't ibang mga halaga upang makita kung ano ang pinakamahusay na gagana para sa mga pangangailangan ng layout ng iyong site.
Mga Paparating na Kaganapan
Ang nilalaman ay pupunta rito ... p>
Ang CSS upang gawin ang mga maramihang hanay na ito ay nagsisimula sa kung ano ang iyong nakita dati:
.content {-moz-column-count: 3; -webkit-column-count: 3; count-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; haligi-puwang: 30px; }Ngayon, ang hamon dito ay na, dahil nais ng browser na hatiin ang nilalaman na ito nang pantay-pantay, kaya kung ang haba ng nilalaman ng mga dibisyon ay iba, ang browser na iyon ay aktwal na hahatiin ang nilalaman ng isang indibidwal na dibisyon, pagdaragdag ng simula nito sa isang haligi at pagkatapos ay magpatuloy sa isa pang (maaari mong makita ito sa pamamagitan ng paggamit ng code na ito upang magpatakbo ng isang eksperimento at magdagdag ng iba't ibang mga haba ng nilalaman sa loob ng bawat dibisyon)!
Hindi iyan ang gusto mo. Gusto mo ang bawat isa sa mga dibisyon na lumikha ng isang natatanging haligi at, gaano man malaki o maliit ang nilalaman ng isang indibidwal na dibisyon, hindi mo ito nais na mahati. Maaari mong makamit ito sa pamamagitan ng pagdaragdag ng isang karagdagang linya ng CSS:
.content div {display: inline-block; }Pipilitin nito ang mga dibisyon na nasa loob ng "nilalaman" upang manatiling buo kahit na binabahagi ito ng browser sa maraming hanay. Kahit na mas mahusay, dahil hindi namin ibinigay ang anumang bagay dito sa isang nakapirming lapad, ang mga haligi na ito ay awtomatikong baguhin ang laki ng bilang ng browser resizes, paggawa ng mga ito ng isang perpektong application para sa tumutugon mga website . Sa puwang na "inline-block" na estilo, ang bawat isa sa iyong 3 dibisyon ay magiging isang natatanging haligi ng nilalaman.
Paggamit ng Haligi-Lapad
May isa pang ari-arian bukod sa "haligi-count" na magagamit mo, at depende sa iyong mga pangangailangan sa layout, maaaring ito ay talagang isang mas mahusay na pagpipilian para sa iyong site. Ito ay "haligi-lapad". Gamit ang parehong markup ng HTML tulad ng ipinakita dati, maaari naming gawin ito sa pamamagitan ng aming CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; haligi-lapad: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; haligi-puwang: 30px; }. nilalaman div {display: inline-block; }Ang paraan na ito ay gumagana ay na ang browser ay gumagamit ng "haligi-lapad" bilang ang pinakamataas na halaga ng hanay na iyon. Kaya't kung ang window ng browser ay mas mababa sa 500 pixel ang lapad, ang mga 3 dibisyon ay lilitaw sa isang haligi, isa sa mga tops ng isa pa. Ito ay isang tipikal na layout na ginagamit para sa mga layout ng mobile / maliit na screen.
Tulad ng pagtaas ng lapad ng browser upang maging sapat na malaki upang magkasya ang 2 mga haligi kasama ang tinukoy na mga puwang ng haligi, awtomatikong dadalhin ng browser mula sa isang solong hanay ng haligi sa dalawang haligi. Panatilihin ang pagtaas ng lapad ng screen at sa huli, makakakuha ka ng isang 3 disenyo ng haligi, sa bawat isa sa aming 3 dibisyon na ipinapakita sa kanilang sariling hanay. Muli, ito ay isang mahusay na paraan upang makakuha ng ilang tumutugon, friendly na layout ng multi-device , at hindi mo na kailangang gamitin ang mga query sa media upang baguhin ang mga estilo ng layout!
Iba pang Mga Properties sa Haligi
Bilang karagdagan sa mga katangian na sakop dito, mayroon ding mga katangian para sa "haligi-panuntunan", kabilang ang kulay, estilo, at mga halaga ng lapad na nagbibigay-daan sa iyo upang lumikha ng mga panuntunan sa pagitan ng iyong mga haligi. Ang mga ito ay gagamitin sa halip na mga hangganan kung nais mong magkaroon ng ilang mga linya na naghihiwalay sa iyong mga haligi.
Oras sa Eksperimento
Sa kasalukuyan, ang CSS Maramihang Layout ng Hanay ay napakahusay na sinusuportahan. Sa mga prefix, higit sa 94% ng mga gumagamit ng web ang makakakita ng mga estilo na ito, at ang hindi suportadong grupo ay talagang magiging mas lumang bersyon ng Internet Explorer na hindi mo maaaring sinusuportahan pa rin.
Sa antas na ito ng suporta ngayon sa lugar, walang dahilan upang hindi magsimulang mag-eksperimento sa CSS Mga Haligi at i-deploy ang mga estilo na ito sa mga handa na website ng produksyon. Maaari mong simulan ang iyong mga eksperimento gamit ang HTML at CSS na ipinakita sa artikulong ito at maglaro sa paligid na may iba't ibang mga halaga upang makita kung ano ang pinakamahusay na gagana para sa mga pangangailangan ng layout ng iyong site.