Lilemong tse ngata, phaputso ea CSS e bile karolo e ntle, empa e hlokahala, karolong ea ho etsa marang-rang. Haeba moqapi oa hau o bitsoa li-columns tse ngata, o ile oa retelehela ho float . Bothata ka mokhoa ona ke hore, ho sa tsotellehe bohlale bo hlollang boo baetsi ba liwebsaete ba li-websaete ba bo bontšitseng ha ho bōptjoa libaka tse rarahaneng tsa maqephe, lifofane tsa CSS ha lia ka tsa rereloa ho sebelisoa ka tsela ena.
Ha li ntse li phaphamala le ho khetholla CSS ho tla ba le sebaka sebopeho sa websaete ka lilemo tse ngata tse tlang, mekhoa e mecha ea mekhoa e kenyelletsang ho kenyeletsa CSS Grid le Flexbox hona joale e fa baetsi ba marang-rang mekhoa e mecha ea ho etsa mehaho ea sebaka sa bona. Tsela e 'ngoe e ncha ea mekhoa e bontšang bokhoni bo bongata ke Columns tse ngata tsa CSS.
Li-columns tsa CSS li 'nile tsa e-ba teng ka lilemo tse seng kae hona joale, empa ho hloka thuso ho li-browsers tsa khale (haholo-holo liphetolelo tsa Internet Explorer) li bolokile litsebi tse ngata tsa websaete ho sebelisa mekhoa ena mosebetsing oa tsona oa tlhahiso.
Qetellong ea ts'ehetso ea liphetolelo tseo tsa khale tsa IE, baetsi ba liwebsaete ba seng ba ntse ba leka ka likhetho tse ncha tsa CSS, Li-columns tsa CSS li kenyelelitsoe, le ho fumana hore li na le taolo e ngata haholoanyane le mekhoa ena e mecha ho feta kamoo ba neng ba e etsa ka ho phapha.
Lintlha tsa motheo tsa Li-columns tsa CSS
Joalokaho lebitso la lona le bontša, li-columns tsa CSS tse ngata (tse tsejoang hape e le CSS3 e mengata ea mohala-kholu) li u lumella ho arola litaba ka har'a lihlopha tse behiloeng. Lintho tse ka sehloohong tsa CSS tseo u ka li sebelisang ke tsena:
- khoeli-palo
- khalase-gap
Bakeng sa khalalelano-bala, u tobetsa palo ea lihlopha tseo u li batlang. Lekhalo la lihlopha e ne e tla ba li-gutters kapa sebaka se pakeng tsa mela. Sebapali se tla nka litekanyetso tsena ebe se arola litaba ka mokhoa o ts'oanang le palo ea lihlopha tseo u li hlalosang.
Mohlala o tloaelehileng oa lihlopha tse ngata tsa CSS ka mokhoa o ka sebelisoang e ka ba ho arola karolo ea lihlooho tse ngotsoeng ka meqolong e mengata, e tšoanang le seo u ka se bonang sehloohong sa koranta. E re u na le mekhabiso e latelang ea HTML (lintlha tseo ka mohlala, merero, ke mpa feela ke beha qalo ea serapa se le seng, ha ho ntse ho etsoa ho ka etsahala hore ho na le lirapa tse ngata tsa lintho tse fumanehang marapeng ana):
Sehlooho sa sehlooho sa hau
Nahana ka lirapa tse ngata tsa mongolo mona ...
Haeba o ngotse mekhoa ena ea CSS:
.content {-moz-column-count: 3; -bbkit-column-count: 3; khoeli-bala: 3; -moz-column-gap: 30px; -blog-column-gap: 30px; khalase-gap: 30px; }}Molao ona oa CSS o ne o tla arola karohano ea "dikahare" ka mela e 3 e lekanang le karopo ea li-pixelse tse 30 pakeng tsa bona. Haeba o ne o batla lihalale tse peli ho e-na le 3, o ne o tla fetola boleng boo mme sebapali se tla bala likarolo tse ncha tsa melamu eo ho arola litaba ka mokhoa o ts'oanang. Hlokomela hore re sebelisa matlotlo a ho rekisa pele, a lateloa ke liphatlalatso tseo e seng tsa prefixed.
E bonolo ha e ntse e le joalo, tšebeliso ea eona ka tsela ena e belaela bakeng sa tšebeliso ea marang-rang. E, o ka arola lihlopha tse ngata ka har'a likhafa tse ngata, empa sena se ka 'na sa se ke sa e-ba sebopeho se setle ka ho fetisisa sa ho bala Websaeteng, haholo-holo haeba bophahamo ba melamu ena e oela tlas'a "lesaka" la skrine.
Ka nako eo babali ba tla tlameha ho phenya le ho theoha e le hore ba bale litaba tse feletseng. Leha ho le joalo, mookameli oa li-columns tsa CSS o bonolo ho feta kamoo u bonang mona, 'me e ka sebelisoa ho etsa joalo ho feta feela ho arola litaba tsa lirapa tse ling - e ka sebelisoa bakeng sa mohaho.
Ho Etsa Lihlahisoa tsa CSS
E-re u na le leqephe la marang-rang le sebaka se nang le lihlooho tse 3 tsa dikahare. Ena ke sebaka se tloaelehileng sa websaeteng, 'me ho finyella mela eo e meraro, ka tloaelo u tla phahamisa likarohano tse teng. Ka li-columns tse ngata tsa CSS, ho bonolo haholo.
Mona ke mohlala o mong oa HTML:
Litaba tsa morao-rao
Litaba li tla ea mona ...
Ho tswa ho Blog ea rona
Tlhaloso e tla ea mona ...
Liketsahalo tse tlang
Tlhaloso e tla ea mona ...
CSS ho etsa melaetsa ena e mengata e qala ka seo o se boneng pejana:
.content {-moz-column-count: 3; -bbkit-column-count: 3; khoeli-bala: 3; -moz-column-gap: 30px; -blog-column-gap: 30px; khalase-gap: 30px; }}Hona joale, phephetso mona ke hore, kaha sebapali se batla ho arola lintho tsena ka mokhoa o ts'oanang, kahoo haeba bolelele ba likhaohano tsena bo fapane, sebapali seo se tla arola lihlooho tsa karohano e le 'ngoe, e kenye letsoho ho e' ngoe ea khoeli le ebe o tsoela pele ho o mong (o ka bona sena ka ho sebelisa khoutu ena ho qalisa teko le ho eketsa bolelele bo fapaneng ba dikahare ka hare ho sehlopha ka seng)!
Hase seo u se batlang. U batla hore karolo e 'ngoe le e' ngoe ea likarolo tsena e iketsetse sebaka se ikhethang 'me, ho sa tsotellehe hore na ho na le lintho tse ngata hakae kapa tse nyenyane li ka arohang, ha ho mohla u batlang hore li arohane. U ka finyella sena ka ho eketsa mohala ona o le mong oa CSS:
.qhoano ea div {ho bonts'a: inline-block; }}Sena se tla qobella likarohano tse ka har'a "diteng" hore li lule li tiile esita le ha sebapali se arola sena ka meqolong e mengata. Ho molemo le ho feta, kaha ha rea fana ka letho mona bophara bo tsitsitseng, lihlopha tsena li tla fetola sebaka se le seng ha mochine oa sebapali a fetolela, ho etsa hore e be kopo e ntle ea liwebsaete tse arabelang . Ka mokhoa ona o "inline-block" sebakeng seo, likarolo tsa hau tse tharo li tla ba karolo e ikhethang ea likahare.
E sebelisa Column-Width
Ho na le thepa e 'ngoe ka ntle ho "bala-bala" eo u ka e sebelisang,' me ho itšetlehile ka litlhoko tsa hau, e ka ba khetho e molemo bakeng sa sebaka sa hau. Ena ke "bophara-bophara". Re sebelisa mokhoa o tšoanang oa HTML joalokaha ho bontšitsoe pejana, re ka etsa sena ka CSS ea rona:
.content {-moz-column-width: 500px; kakaretso-khoka-khoka-khoeli: 500px; bophara ba likarolo: 500px; -moz-column-gap: 30px; -blog-column-gap: 30px; khalase-gap: 30px; }. div div {bonts'a: inline-block; }}Tsela eo sena se sebetsang ka eona ke hore sebapali se sebelisa "khoeli-bophara" e le boleng bo phahameng ba khoeli eo. Kahoo haeba fensetere ea sebapali e le bophara ba li-pixels tse ka tlaase ho 500, lihlopha tsena tse tharo li tla hlaha ka lehlakoreng le leng, e 'ngoe ea litlhōrō tsa e' ngoe. Ena ke sebaka se tloaelehileng sa lisebelisoa tsa mohala / tse nyenyane tsa skrine.
Ha bophara ba sebapali bo ntse bo eketseha ho ba boemong bo lekaneng ba ho lumellana le lihalale tse 2 hammoho le likheo tse boletsoeng, mochinelo o tla tloha o le mong ho tloha ho selikalikoe se le seng ho mela e 'meli. Tsoela pele ho eketsa bophara ba skrine mme qetellong, o tla fumana moqapi o 3 oa kholumo, 'me e' ngoe le e 'ngoe ea likarolo tse tharo tse bonts'itsoeng ho eona. Hape, ena ke tsela e ntle ea ho fumana mekhoa e amohelehang ea mekhoa e mengata, 'me ha ho hlokahale hore u sebelise lipotso tsa mecha ea litaba ho fetola mekhoa ea mohaho!
Mehaho e meng ea Likolo
Ntle le lits'ebetso tse koahetsoeng mona, ho boetse ho na le lisebelisoa tsa "puso ea khohlopo", ho kenyeletsa le mmala, setaele le litekanyetso tsa bophara tse lumellang hore u bōpe melao pakeng tsa lihlopha tsa hau. Tsena li ne li tla sebelisoa ho e-na le meeli ea lichelete haeba u batla ho ba le mela e arohanang meqomo ea hau.
Nako ea Boiteko
Hona joale, CSS Multiple Column Layout e tšehetsoa haholo. Ka li-prefixes, basebelisi ba marang-rang ba 94% ba tla khona ho bona mekhoa ena, 'me sehlopha seo se sa tšehetsoeng e ka ba liphetoho tse ngata tsa khale tsa Internet Explorer tseo u ka' nang ua se ke ua li tšehetsa leha ho le joalo.
Ka boemo bona ba ts'ehetso hona joale, ha ho na lebaka la hore u se ke ua leka ka litlhaloso tsa CSS le ho tsamaisa mekhoa ena liwebsaeteng tse loketseng tsa tlhahiso. O ka qala liteko tsa hau ka HTML le CSS e hlahang sehloohong sena mme u bapala ka mekhoa e sa tšoaneng ho bona hore na ho tla sebetsa eng hamolemo bakeng sa sebaka sa hau sa sebaka sa hau.