No te maha o nga tau, kua rereke nga waka rererangi CSS, ahakoa he mea tika, he waahanga ki te hanga i nga whakatakotoranga paetukutuku. Mena i tohua to hoahoa mo nga pou maha, ka huri koe ki nga waarangi . Ko te raruraru me tenei tikanga ko te mea ahakoa, ahakoa te mohiotanga nui kua whakaatuhia e nga kaihoahoa / kaiwhakarato tukutuku i te hanganga o nga hanganga o nga pae whakaari, kaore i tino hiahiatia nga waahanga o te CSS ki te whakamahi i tenei huarahi.
I te mea ko te waahanga me te tūnga CSS me tino whai wāhi ki te hoahoa tukutuku mo nga tau e maha ake nei, kei te whakaratohia e nga hoahoa tukutuku hou nga huarahi hou mo te waihanga i o raatau taahiranga pae tukutuku, tae atu ki a CSS Grid me Flexbox. Ko tetahi atu mahinga whakatakotoranga hou e whakaatu ana i te nui o te waahanga ko CSS Multiple Columns.
Kua roa nga pou o CSS mo nga tau torutoru inaianei, engari he kore tautoko i nga kaitoro tawhito (te nuinga o nga momo tawhito o Internet Explorer) kua pupuri i te maha o nga kaiwhakaako tukutuku mai i te whakamahi i enei ahua i roto i ta raatau mahi mahi.
I te mutunga o te tautoko mo enei putanga pakeke o IE, kei te whakamatautauhia e etahi kaihoahoa tukutuku nga waahanga hou CSS, CSS Columns whakauru, me te rapu he nui atu te mana ki enei huarahi hou atu i te waa.
Ko nga Kaupapa o te CSS Columns
Ko tona ingoa e tohu ana, ko CSS Multiple Columns (e mohiotia ana ko te tahua CSS3 maha-tīwae) ka taea e koe te wehe i nga ihirangi ki te maha o nga pou. Ko nga tino tuhinga CSS tino e whakamahia ana e koe:
- tīwae-tatau
- tīwae
Mo te tatau-tīwae, tautuhi koe i te maha o nga tīwae e hiahia ana koe. Ko te waahanga o te tīwae ka waiho ko te pupuhi, ko te mokowhiti i waenga i aua pou. Ka tangohia e te kaitirotiro enei uara me te wehe i nga tuhinga ki te maha o nga pou ka tohua e koe.
Ko tetahi tauira o te maha o nga pou o te CSS hei mahi, hei wehe i te poraka o nga tuhinga kuputuhi ki nga pou maha, me te mea ka kite koe i te tuhinga nupepa. Ki a koe kei a koe te tohu HTML e whai ake nei (tuhihia hei tauira, kei te whakatakoto noa ahau i te timatanga o tetahi parawae, i te wa e mahi ana pea pea he maha nga waahanga o te ihirangi kei roto i tenei tohu):
Ko te upoko o to tuhinga
Whakaaroa he maha nga parawae o te tuhinga i konei ...
Mena ka tuhia e koe enei momo CSS:
.content [-moz-column-count: 3; -arangi-tīwae-tatau: 3; kohinga-tīwae: 3; -moz-tīwae-hapa: 30px; -webkit-tīwae-haupae: 30px; tīwae-rawe: 30px; }Ko tenei ture CSS ka wehe i te wehenga "ihirangi" ki te 3 nga pou rite me te horahanga o te 30 pika i waenganui ia ratou. Mena ka hiahia koe ki nga pou e rua mo te 3, ka huri noa koe i taua uara, ka tautuhia e te kaitohu nga whanui hou o aua pou hei wehe i nga tuhinga. Kia mahara kei te whakamahi maatau i nga taonga o te kaihoko-mua, ka whai mai nga korero kore-mua.
He maamaa tenei, ko tana whakamahinga i tenei waa he mea nui ki te whakamahi i te paetukutuku. Ae, ka taea e koe te wehe i te huinga o te ihirangi ki nga pou maha, engari kaore pea tenei e pai ki te wheako korero mo te Tukutuku, mehemea ka eke te teitei o enei pou ki raro i te "pan" o te mata.
Ko nga kaipānui ka whai ake ki te huri ki runga, ki raro, ki te korero i te ihirangi katoa. Engari, ko te tumuaki o nga CSS Columns he mea ngawari kia kitea e koe i konei, a ka taea te whakamahi kia nui ake te mahi i te waahanga o etahi parawae - ka taea te whakamahi mo te tahora.
Tahora me CSS Columns
Mea atu kei a koe he whārangi tukutuku me te rohe ihirangi e 3 nga pou o te ihirangi. He mahinga pae tukutuku tino whaitake tenei, me te whakatutuki i aua 3 pou, ka rereke koe i nga waahanga kei roto. I te maha o nga pou o CSS, he tino maamaa.
Anei he tauira HTML:
Nga News hou
Ka haere te ihirangi ki konei ...
Mai i to Tatou Blog
Ka haere te ihirangi ki konei ...
Ngā Takahanga Ka Paetae
Ka haere te ihirangi ki konei ...
Na, ko te wero i konei ko te mea, i te mea e hiahia ana te kaiwhakahaere ki te wehewehe i enei tuhinga, na, mehemea he rereke te roa o nga waahanga, ka wehewehea e te kaituhi nga ihirangi o te wehenga takitahi, me te whakauru i te timatanga o te waahanga ki tetahi pouwae ka haere tonu ki tetahi atu (ka taea e koe te kite i tenei ma te whakamahi i tenei waehere hei whakahaere i te whakamatautau me te taapiri i nga waahanga rereke i roto i ia waahanga)!
Ehara i te mea e hiahia ana koe. E hiahia ana koe ki enei o enei wehenga hei hanga i tetahi pou motuhake, ahakoa he nui, he iti ranei te waahanga o te waahanga takitahi, kaore koe e hiahia kia wehe. Ka taea e koe te whakatutuki i tenei ma te whakauru mai i tenei raupapa atu o CSS:
.e whakaatu ana i te whakaaturanga: porowhita-taurangi; }Ma tenei ka akiaki i aua waahanga kei roto i te "ihirangi" kia noho tonu i te mea ka tohatohahia e te kaiwhakahaere tenei ki nga pou maha. Ko te mea pai ake, no te mea kaore i hoatu e matou tetahi mea i konei, he whanui whanui, ka whakahoutia ano enei pou i te wa e whakahou ana te rorohiko, ka waiho hei tono pai mo nga paetukutuku whakautu . Ma te ahua o te "taiwhanga-a-poraka" kei roto, ko ia o nga 3 waahanga ka tuhia he waarangi huinga.
Te whakamahi i te Tīwae-Nui
He tetahi atu rawa atu i te "kohinga-tīwae" e taea ana e koe te whakamahi, a, i runga i nga hiahia o to tautuhinga, ka waiho pea hei whiriwhiri pai mo to pae. Koinei te "anga-whanui". Ma te whakamahi i te tohu tohu HTML rite i whakaaturia i mua, ka taea e tatou te mahi i tenei me to tatou CSS:
.content [-moz-tīwae-whānui: 500px; -aaputu-wharangi-whanui: 500px; whanui-whanui: 500px; -moz-tīwae-hapa: 30px; -webkit-tīwae-haupae: 30px; tīwae-rawe: 30px; } .e whakaatu ana i te whakaaturanga: porowhita-taurangi; }Ko te ara e mahi ana tenei ko te whakamahi a te kaiwhakahaere i tenei "kohinga-whanui" hei tohu morahi o taua pou. Na, ki te iti ake i te 500 pika te matapihi o te matapihi, ka puta enei 3 waahanga ki tetahi pou kotahi, tetahi o nga pito o tetahi atu. He mahinga angamahi tenei e whakamahia ana mo nga whakatakotoranga matapihi waea / iti.
I te mea ka nui ake te whanuitanga o te taputapu hei whakauru i nga pou e rua me nga waahi o te tīwae kua tohua, ka rere ke te mahinga i te taatai tīwae kotahi ki nga pou e rua. Kia mau tonu te whanui o te mata me te mutunga, ka whiwhi koe i te hoahoa 3 hoahoa, me o maatau 3 waahanga kua whakaatuhia i roto i to ratau ake pou. Ano, he huarahi tino pai tenei ki te tiki i etahi tautuhinga hoahoa , maha-raupapa hoahoa , a kaore pea koe e hiahia ki te whakamahi i nga uiuinga pāpāho hei huri i nga momo tahora!
Ētahi atu Āhuatanga Tīwae
I tua atu i nga taonga e mau ana ki konei, he mea hoki mo te "ture-pou", tae atu ki te tae, te ahua, me nga uara whanui e tuku ana ki a koe kia hanga ture i waenganui i ou pou. Ka whakamahia enei hei utu mo nga rohe ka hiahia koe ki te whai i etahi raina e wehe ana i nga pou.
Te wa ki te whakamatautau
I tenei wa, he pai te tautoko o te Tahora Tīwae Maha o CSS. I te waahi, ka nui atu i te 94% o nga kaiwhakamahi tukutuku ka kite i enei momo ahua, a, ko taua waahanga kaore i te mea he tino pakeke ake o Internet Explorer, kaore pea koe e tautoko.
Ki tenei taumata tautoko i tenei wa, kaore he take kia kaua e timata ki te whakamatautau ki nga CSS Columns me te whakamahi i enei ahua i roto i nga waahanga tuwhera. Ka taea e koe te tīmata i nga whakaaturanga me te whakamahi i te HTML me te CSS i roto i tenei tuhinga, me te taapiri ki nga uara rerekite hei kite i nga mea e pai ana mo nga waahanga o taau pae.