Airson mòran bhliadhnaichean, tha coiteasan CSS air a bhith na phàirt cianalach, ach riatanach, ann an cruthachadh dhealbhan-lìn. Ma dh'iarr an dealbhadh agad air iomadh colbh, thionndaidh thu gu flùraichean . Is e an duilgheadas leis an dòigh seo, a dh 'aindeoin an iongantachd iongantach a tha luchd-dealbhaidh / luchd-leasachaidh lìn air a shealltainn ann a bhith a' cruthachadh shuidheachaidhean làrach ioma-fhillte, cha b 'àbhaist dha a bhith a' cleachdadh bathar CSS an-còmhnaidh.
Ged a tha àitean ann an rèiteachaidhean flòraichean agus CSS cinnteach gu bheil àite ann an dealbhadh lìn airson iomadh bliadhna ri thighinn, tha dòighean cruth nas ùire a 'gabhail a-steach Grid CSS agus Flexbox a-nis a' toirt dhòighean ùra do dhealbhadairean lìn airson an làrach-lìn a chruthachadh. Is e modh cruth ùr eile a tha a 'sealltainn tòrr de chomas a th' ann an Colbhan Iomadachd CSS.
Tha Colbhan CSS air a bhith a 'dol air adhart airson beagan bhliadhnaichean a-nis, ach tha dìth taic ann am brobhsairean nas sine (gu h-àraidh tionndaidhean nas sine de Internet Explorer) air mòran proifeiseantaich lìn a chumail bho bhith a' cleachdadh nan stoidhlichean sin san obair riochdachaidh aca.
Le deireadh na taice do na seann tionndaidhean sin de IE, tha cuid de dhealbhadairean lìn a-nis a 'feuchainn ri roghainnean cruth CSS ùra, le Colbhan CSS a' gabhail a-steach, agus a 'lorg gu bheil barrachd smachd aca leis na dòighean-obrach ùra sin na bha iad a' dèanamh le còmhdach.
Bun-stèidh Colbhan CSS
Mar a tha an t-ainm a 'toirt a-mach, tha Colbhan Ioma-CSS (aithnichte mar cruth ioma-colbh CSS3) a' toirt cothrom dhut susbaint a roinn ann an àireamh shuidhichte de cholbhan. Is iad na feartan CSS as bunaitiche a chleachdadh tu:
- cunntas-colbh
- bheàrn-colbh
Airson cunntas colbh, sònraichidh tu an àireamh de cholbhan a tha thu ag iarraidh. B 'e beàrn a' chuilbh na cutairean no an sparradh eadar na colbhan sin. Gabhaidh am brabhsair na luachan sin agus roinn e an t-susbaint gu cothromach anns an àireamh de cholbhan a tha thu a 'sònrachadh.
Is e eisimpleir cumanta de iomadh colbhan CSS ann an cleachdadh a bhiodh ann airson bloigh de shusbaint teacsa a roinn ann an iomadh colbhan, coltach ris na bhiodh tu a 'faicinn ann an artaigil pàipear-naidheachd. Innis gu bheil an HTML HTML a leanas agad (fa-near gur e adhbhar adhbharan a th 'ann, chan eil mi ach toiseach tòiseachaidh aon pharagraf, fhad' s a bhiodh e an sàs gu bheil iomadh paragraf de shusbaint anns a 'chomharra seo):
Ceann an artaigil agad
Smaoinich mòran de pharagrafan teacsa an seo ...
Ma sgrìobhas tu an stoidhle CSS seo:
.content {-moz-column-count: 3; -webkit-column-count: 3; cunnt colbh: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; beàrn-colbh: 30px; }Rinneadh an riaghailt CSS seo an roinn "susbaint" a roinn ann an trì colbhan co-ionnan le beàrn de 30 piogsail eatarra. Nam biodh tu airson dà cholbhan an àite 3, bhiodh tu dìreach ag atharrachadh an luach sin agus bhiodh am brabhsair a 'tomhas leud ùr nan colbhan sin gus an susbaint a roinn gu cothromach. Feuch gun cleachd sinn na feartan vendor-prefixed an toiseach, agus an uair sin na dearbhaidhean nach eil ro-chlàraichte.
Cho furasta ri seo, tha e air a chleachdadh mar seo ceasnachail airson cleachdadh làrach-lìn. 'S e, is urrainn dhut grunn susbaint a roinn ann an iomadh colbhan, ach is dòcha nach e seo an t-eòlas leughaidh as fheàrr airson an lìn, gu h-àraidh ma tha àirde nan colbhan sin a' tuiteam fo "phasgadh" na sgrìn.
An uair sin dh'fheumadh luchd-leughaidh gluasad suas is sìos gus an t-susbaint iomlan a leughadh. A dh 'aindeoin sin, tha prionnsapal Colbhan CSS cho furasta' sa chì thu an seo, agus faodar a chleachdadh gus tòrr a bharrachd a dhèanamh na dìreach cuid de na paragrafan a roinn - faodaidh e, gu dearbh, a bhith air a chleachdadh airson a 'chruth.
Leagan le Colbhan CSS
Abair gu bheil làrach-lìn agad le raon susbaint aig a bheil 3 colbhan de shusbaint. Is e seo làrach-lìn fìor àbhaisteach, agus na trì colbhan sin a choileanadh, mar as trice bhiodh tu a 'seòladh na roinnean a tha a-staigh. Le colbhan ioma-sheòrsach CSS, tha e tòrr nas fhasa.
Seo beagan eisimpleirean HTML:
Naidheachdan as ùire
Bhiodh susbaint a 'dol an seo ...
From Our Blog
Bhiodh susbaint a 'dol an seo ...
Tachartasan ri thighinn
Bhiodh susbaint a' dol an seo ...
Bidh an CSS airson na diofar cholbhan sin a dhèanamh a 'tòiseachadh leis na chunnaic thu roimhe:
.content {-moz-column-count: 3; -webkit-column-count: 3; cunnt colbh: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; beàrn-colbh: 30px; }A-nis, is e an dùbhlan an seo, bhon a tha am brabhsair ag iarraidh an susbaint seo a roinn gu cothromach, mar sin ma tha fad susbaint nan roinnean sin eadar-dhealaichte, bidh an brabhsair sin a 'roinn susbaint roinn fa leth, a' cur a 'chiad uair ri aon cholbh agus agus an uairsin a 'dol a-steach gu fear eile (chì thu seo le bhith a' cleachdadh a 'chòd seo gus deuchainn a dhèanamh agus cuiridh e diofar fhaid de shusbaint taobh a-staigh gach roinn)!
Chan e sin a tha thu ag iarraidh. Tha thu airson 's gum bi gach aon de na roinnean sin a' cruthachadh colbh eadar-dhealaichte agus, ge bith dè cho mòr no cho beag 'sa dh'fhaodadh susbaint roinn fa leth a bhith, chan eil thu ag iarraidh a roinn. Faodaidh tu seo a choileanadh le bhith a 'cur ris an loidhne seo a bharrachd CSS:
.content div {display: inline-block; }Leanaidh seo air na roinnean sin a tha a-staigh den "susbaint" a bhith slàn fiù 's mar a bhios am brabhsair a' roinn seo ann an iomadh colbhan. Fiù 's nas fheàrr, seach nach tug sinn seachad rud sam bith an seo, thèid na colbhan sin atharrachadh gu fèin-obrachail fhad' s a tha am brabhsair a 'meudachadh, gan dèanamh mar thagradh freagarrach airson làraich-lìn a tha a' freagairt . Leis an stoidhle "inline block" sin, bidh gach aon de na trì roinnean agad na cholbh shònraichte de shusbaint.
A 'cleachdadh Colbh-leud
Tha seilbh eile ann a bharrachd air "cunntadh-colbh" a dh'fhaodas tu a chleachdadh, agus a rèir dè an cruth a tha a dhìth ort, faodaidh gur e roghainn nas fheàrr a th 'ann airson do làrach. Is e seo "leud-colbh". A 'cleachdadh an aon chomharra HTML mar a chaidh a shealltainn roimhe, dh' fhaodadh sinn seo a dhèanamh le ar CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; leud-colbh: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; beàrn-colbh: 30px; } .content div {display: inline-block; }Is e an dòigh sa bheil seo ag obair gu bheil am brabhsair a 'cleachdadh an "leud-colbh" seo mar luach as àirde a' cholbh sin. Mar sin ma tha uinneag a 'bhrabhsair nas lugha na 500 piogsail de leud, nochd na trì roinnean ann an aon cholbh, aon de na mullaichean. Is e seo cumadh àbhaisteach a tha air a chleachdadh airson dhealbhaidhean gluasadach / sgàilean beaga.
Leis gu bheil leud an luchd-brabhsair a 'meudachadh gu leòr airson 2 cholbhan a fhreagairt còmhla ris na beàrnan colbh ainmichte, thèid am brabhsair gu fèin-ghluasadach bho aon cholbh le dà cholbhan. Cùm a 'meudachadh leud an sgrion agus mu dheireadh, gheibh thu dealbh 3 colbh, le gach aon de na trì roinnean againn air an taisbeanadh anns a' cholbh aca fhèin. A-rithist, tha seo na dhòigh math airson cuid de dhealbhaidhean freagairt, ioma-inneal fhaighinn , agus cha leig thu leas eadhon ceistean meadhanan a chleachdadh gus na stoidhlichean a dhealbhadh!
Feartan Colbh Eile
A bharrachd air na taighean air an còmhdach an seo, tha cuideachd togalaichean ann airson "riaghailt colbh", a 'gabhail a-steach luachan dath, stoidhle agus leud a leigeas leinn riaghailtean a chruthachadh eadar do cholbhan. Bhiodh iad sin air an cleachdadh an àite crìochan ma tha thu ag iarraidh gum bi cuid de loidhnichean a 'sgaradh do cholbhan.
Ùine gu Experiment
Aig an àm seo tha taic fìor mhath aig Layout Column Multiple Column. Le ro-leasachan, bhiodh còrr is 94% de luchd-cleachdaidh lìn comasach air na stoidhlichean seo fhaicinn, agus cha b 'e dìreach na seann dreachan as sine de Internet Explorer a bhiodh ann am buidheann gun taic a dh' fhaodadh nach eil thu a 'toirt taic tuilleadh co-dhiù.
Leis an ìre taic seo a-nis a-nis, chan eil adhbhar ann gun a bhith a 'dèanamh deuchainnean le Colbhan CSS agus a' cleachdadh nan stoidhlichean sin ann an làraichean-lìn deiseil. Faodaidh tu tòiseachadh air na deuchainnean agad le bhith a 'cleachdadh HTML agus CSS a tha air an taisbeanadh san artaigil seo agus a' cluich timcheall le luachan eadar-dhealaichte gus faicinn dè a bhiodh ag obair nas fheàrr airson feumalachdan an làrach agad.