No ka nui o nā makahiki, heʻano'onikala, he mea pono ka CSS mokulele, i ka hanaʻana i nā papahana pūnaewele. Inā i kohoʻia kāu koho no nā kolamu he nui, ua huliʻoe i nā mokuahi . ʻO ka pilikia me kēiaʻano,ʻoiai, me kaʻike nui loa i hōʻikeʻia e nā mea hoʻolālā pūnaewele / mea hoʻolālā i ka hanaʻana i nā papahana hoʻolālā paʻakikī,ʻaʻole i hoʻohana ponoʻia nā mea holoʻokoʻa CSS e hoʻohanaʻia ma kēiaʻano.
ʻOiaiʻo ka holoʻana a me ka hoʻonohonoho CSS he pono e loaʻa kahi i loko o ka hoʻolālā pūnaewele no nā makahiki he nui e hiki mai ana, ke hāʻawi nei nāʻano hana hou hou, me CSS Grid a me Flexbox i nā mea hoʻolālā pūnaewele i nā ala hou e hana i kā lākou mau papahana pūnaewele. ʻO kekahiʻano hoʻolālā hoʻolālā hou e hōʻike ana i ka nui o ka mana e hiki ke loaʻa ka CSS Multiple Columns.
Ua puniʻo Columns i kekahi mau makahiki i kēia manawa, akā,ʻaʻohe kōkua i nā polokalamu'ekuhi (ma kahi o nā polokalamu kahiko o Internet Explorer) ua mālama nui i nāʻoihana pūnaewele mai ka hoʻohanaʻana i kēiaʻano i kā lākou hana hana.
Me ka hopena o ke kākoʻo no kēlā mau'ōlelo kahiko o IE, ua hoʻokolohua kekahi mau mea hoʻolālā pūnaewele me nā koho hou o CSS, nā CSS Columns e komo pū ana, a me kaʻikeʻana uaʻoi aku kaʻoi o ka mana o kēia mau ala hou ma mua o kā lākou hana me nā mea lele.
Nā kumu o CSS Columns
E like me ka inoa o ka inoa, nā CSS Multiple Columns (ʻikeʻiaʻo CSS3 i ka papahana multi-colon) e hiki iāʻoe ke hoʻokaʻawale i nā mea i loko o ka helu hoʻonohonoho. ʻO nā kumuhana CSS maʻamau loa āu e hoʻohana ai:
- ka helu helu helina
- ʻO ke āpau
No ka helu helu tīlani, hoʻonohonohoʻoe i ka helu o nā kolamu āu e makemake ai. ʻO ka paepae kolamuʻo ia ka nalu a iʻole ke ākea ma waena o kēlā mau pou. E lawe ka polokalamu kelepona i kēia mau waiwai a hoʻokaʻawale i ka mea i loko o ka helu o nā kolamu āu e kuhikuhi ai.
ʻO kahi hiʻohiʻona maʻamau o CSS nui mau māwae ma ka hana,ʻo ia ka hoʻokaʻawaleʻana i kahi poho o nā kikokikona kikokikona i nā kolamu nui, e like me ka mea āu eʻike ai ma kahi nūpepa nūpepa. E'ōlelo iāʻoe i kēia hōʻailona HTML (note e like me nā kumu,ʻo wau wale nō e hoʻokomo i ka hoʻomakaʻana o kekahi palakalakala, akā ma kaʻoihana, aia paha he mau paukūʻekolu o kēia puke):
Ke poʻo inoa o kāu mea kākau
E noʻonoʻo i ka nui o nā māhele o ka 'ōlelo maʻaneʻi ...
Inā ua kākauʻoe i kēia mauʻano CSS:
.content [-moz-column-count: 3; -oclock-column-count: 3; ka helu helu heluna: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ʻO ke kolamu: 30px; }E hoʻokaʻawale kēia kulekele CSS i ka mahele "content" i 3 mau pou like me kahi āpau o 30 pika i waena o lākou. Inā makemakeʻoe iʻelua koluma ma kahi o ka 3, hiki iāʻoe ke hoʻololi i kēlā kumukūʻai a heluʻia e nā polokalamu kelepona i nā whānui ākea o kēlā mau kola eʻoki mau i ka mea. Hoʻolaha e hoʻohana mākou i nā kuleana kūʻai mua i kūʻaiʻia ma mua, a ma muli o nā hōʻike i kauʻoleʻia.
E like me ka maʻalahi o kēia, hoʻohanaʻia kona hoʻohanaʻana i kēiaʻano no ka hoʻohana pūnaewele. ʻAe, hiki iāʻoe ke puʻunaue i ka puʻupuʻu o nā mea i loko o nā pae maha, akāʻaʻole paha kēia i kaʻike heluhelu maikaʻi loa no ka pūnaewele, keʻole ke kiʻekiʻe o kēia mau pou i lalo o ka "fold" o ka maka.
Pono ka poʻe heluhelu e'ōwili i lalo a lalo e heluhelu i ka mea piha piha. Akā, ke maʻalahi o ke poʻo o CSS Columns e like me kouʻikeʻana maʻaneʻi, a hiki ke hoʻohanaʻia e hana i nā mea he nui ma mua o ka hoʻokaʻawaleʻana i ka helu o kekahi palakala - pono hiki ke hoʻohanaʻia no ka hoʻolālā.
Layout Me CSS Columns
E'ōlelo e loaʻa iāʻoe kahi pūnaewele pūnaewele me kahi kikowaena he 3 mau kolemu o ka mea. He paehana pūnaewele pūnaewele loa kēia, a no ka hoʻokōʻana i kēlā mau papaʻekolu, e'ānai pinepineʻoe i nā māhele i loko. Me ka CSS nui-mau kia,ʻoi aku ka maʻalahi.
Eia kekahi mauʻano HTML:
Nūhou Hou
E hele kaʻike ma 'aneʻi ...
Mai kā mākou Blog
E hele kaʻike maʻaneʻi ...
Nā hanana e hiki mai ana
p>
ʻO ka CSS e hoʻomaka i kēia mau maha maha me ka mea āu iʻike ai ma mua:
.content [-moz-column-count: 3; -oclock-column-count: 3; ka helu helu heluna: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; ʻO ke kolamu: 30px; }I kēia manawa,ʻo ka pahuhopu maʻaneʻi, no ka makemakeʻana o ka mea makemake e wāwahi i kēia'eneke, no laila, inā heʻokoʻa ka lōʻihi o kēia mau mahele, e hoʻokaʻawale ka polokalamu kelepona i nā mea o ka mahele hoʻokahi, me ka hoʻohuiʻana i kēlā me kēia kolamu. a laila e hoʻomau i kahi'ē aʻe (hiki iāʻoe keʻike i kēia ma ka hoʻohanaʻana i kēia code e holo i ka hoʻokolohua a hoʻomohala i nā manawa likeʻole o nā mea ma loko o kēlā me kēia mahele)!
ʻAʻoleʻo ia ka mea āu e makemake ai. Makemakeʻoe i kēlā me kēia mau mahele e hana i kahi kolina kūikawā a, no ka nui a me ka liʻiliʻi paha o ka puʻupuʻu o kēlā me kēia puʻe,ʻaʻoleʻoe e makemake e māhele. Hiki iāʻoe ke hana i kēia ma ka hoʻoukaʻana i kēia laina hou o CSS:
.e hōʻike i ka hōʻike: inline-block; }ʻO kēia ka mea e hoʻonele i kēlā mau māhele i loko o ka "mea" e hoʻomau i ka paʻaʻana e like me ka hoʻokaʻawaleʻana o ka polokalamu kelepona i loko o nā kolamu nui. ʻOiai maikaʻiʻole, no ka mea,ʻaʻole mākou i hāʻawi i kekahi mea ma kahi o ka laulā i kauʻia, e hoʻopiliʻia ana kēia mau pou i ka manawa e holo ai ka polokalamu kele pūnaewele, e hoʻolilo iā lākou i polokalamu maikaʻi no nā pūnaewele pane . Me kēlāʻano "line-block" i kahi,ʻo kēlā me kēia o kāu mau māheleʻekolu he kikowaena kahe o nā mea.
Ke hoʻohanaʻana i ka Hō'ālua Lā
Aia kekahi waiwai'ē aʻe ma waho o ka "helu kuala-helu" i hiki iāʻoe ke hoʻohana, a ma muli o kāu mau kumu hoʻohālikelike, pono paha e koho maikaʻiʻia no kāu pūnaewele. ʻO kēia ka "laulā-lahi". Ke hoʻohana nei i ka hōʻailona HTML like me ia i hōʻike muaʻia, hiki iā mākou ke hana i kēia me kā mākou CSS:
.content [-moz-column-width: 500px; Loaʻa-pūnaewele-maha-whānui: 500px; ka whānui o ke kolamu: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; ʻO ke kolamu: 30px; } .e hōʻike i ka hōʻailona:'āpana kikowaena; }ʻO ke ala e hanaʻia aiʻo ia ka hoʻohanaʻana o ka mea hoʻohana i kēia "kolamu pae" e like me ka palena kiʻekiʻe loa o kēlā kolamu. No laila, inā he emi ka pūnaewele pūnaewele ma lalo o 500 pixels ākea, eʻikeʻia kēia mau māheleʻekolu i kekahi pae hoʻokahi, hoʻokahi o nā piko o kekahi. ʻO kēia kahi hoʻonohonoho maʻamau i hoʻohanaʻia no nā papa hana kiʻi pūnaewele / kiʻi liʻiliʻi.
A piʻi ka nui o ka pūnaewele pūnaewele e hōʻaia i 2 mauʻanuʻu me nā laikini o ke kolamu i'ōleloʻia, e holo pololei ka polokalamu kele pūnaewele mai kahi papa hoʻolālā iʻelua papa. E hoʻomau i ka hoʻonuiʻana i ka pākuhi a me ka hope, e loaʻa iāʻoe kahi papahana 3, me kēlā me kēia o kā mākou mau māheleʻekolu i loko o ko lākou kolamu pono'ī. Eia hou, he ala maikaʻi kēia no ka loaʻaʻana o nā papa hoʻolohe manaʻoʻana, nā papahana hoʻolaha nui-nui , aʻaʻoleʻoe e pono e hoʻohana i nā nīnau hulina e hoʻololi i nāʻano o ke kāʻei!
Nā'Iina Waiwai'ē aʻe
Ma waho aʻe o nā waiwai i uhiʻia maʻaneʻi, aia kekahi mau waiwai no "rule colon-rule", me ka laulā, keʻano, a me nā'ilā laulā eʻae iāʻoe e hana i nā leka ma waena o kāu mau pou. E hoʻohanaʻia kēia mau mea ma kahi o nā palena inā makemakeʻoe e loaʻa kekahi laina e hoʻokaʻawale ana i kou mau pou.
Ka wā e hoʻokolohua ai
I kēia manawa, ua kākoʻo maikaʻiʻia ka pae hoʻolālā papahana CSS. Ma mua o nā prefix, aia ma kahi o 94% o nā mea hoʻohana pūnaewele eʻike i kēia mauʻano, aʻo kēlā hui i'ōleloʻoleʻia he pono loa i nā manaʻoi aʻe o Internet Explorer kahi hikiʻole iāʻoe ke kākoʻo.
Me kēia kūlana o ke kākoʻo i kēia manawa,ʻaʻohe kumu e hoʻomaka ai e hoʻokolohua me CSS Columns a hoʻolālā i kēia mauʻano i ka hoʻomākaukauʻana i nā pūnaewele pūnaewele. Hiki iāʻoe ke hoʻomaka i kāu mau ho'āʻo e hoʻohana ana i ka HTML a me CSS i hōʻikeʻia ma kēiaʻatikala a pāʻani likeʻole me nā mea likeʻole eʻike ai i ka mea e kūpono i nā pono o kāu papahana.