Í mörg ár hafa CSS flotar verið finicky, en nauðsynlegur hluti til að búa til vefútlit. Ef hönnunin þín hringdi í marga dálka sneriðu að floti . Vandamálið með þessari aðferð er sú að þrátt fyrir ótrúlega hugvitssemi sem vefhönnuðir / verktaki hafa sýnt í að búa til flóknar viðbótarsíður, voru CSS flotar aldrei raunverulega ætlað að nota á þennan hátt.
Á meðan floti og CSS staðsetning eru viss um að hafa stað í vefhönnun í mörg ár að koma, eru nýrri skipulagningartækni, þar á meðal CSS Grid og Flexbox, nú að gefa vefhönnuðum nýjar leiðir til að búa til vefútlit þeirra. Önnur ný skipulag tækni sem sýnir mikla möguleika er CSS marga dálka.
CSS dálkar hafa verið í kringum nokkur ár, en skortur á stuðningi í eldri vöfrum (aðallega eldri útgáfur af Internet Explorer) hefur haldið mörgum fagfólki frá því að nota þessar stíll í framleiðsluvinnu sinni.
Með því að styðja við þessar eldri útgáfur af IE, eru nokkur vefhönnuðir nú að gera tilraunir með nýjar CSS skipulagsmöguleika, CSS dálkar með og finna að þeir hafa miklu meiri stjórn á þessum nýjum aðferðum en þeir gerðu með flotum.
Grunnatriði CSS dálka
Eins og nafnið gefur til kynna, getur CSS marga dálka (einnig þekkt sem CSS3 multi-dálkur skipulag) leyft þér að skipta efni inn í ákveðinn fjölda dálka. Helstu undirstöðu CSS eiginleika sem þú vilt nota eru:
- dálk-telja
- dálkur-bilið
Fyrir dálkatölu tilgreinir þú fjölda dálka sem þú vilt. Dálkur bilið væri gutters eða bil milli þessara dálka. Vafrinn tekur þessar gildi og skiptir efninu jafnt inn í fjölda dálka sem þú tilgreinir.
Algengt dæmi um CSS mörg dálka í reynd væri að skipta blokk texta innihald í marga dálka, svipað og þú myndir sjá í blaðagrein. Segðu að þú hafir eftirfarandi HTML-merkingu (athugaðu að til dæmis er ég að setja aðeins upphaf eitt málsgrein, en í raun væri líklegt að margar málsgreinar innihaldi þessa merkingu):
Fyrirsögn greinarinnar
Ímyndaðu þér fullt af textaritum hér ...
Ef þú skrifaðir þá þessar CSS stíl:
.content {-moz-column-count: 3; -webkit-dálkur: 3; dálkur: 3; -moz-dálkur-bilið: 30px; -webkit-dálkur-bilið: 30px; dálkur-bil: 30px; }Þessi CSS regla myndi skipta "efni" deild í 3 jafna dálka með bili 30 punkta milli þeirra. Ef þú vilt tvo dálka í stað 3, þá ættir þú einfaldlega að breyta því gildi og vafrinn myndi reikna nýjan breidd þessara dálka til að kljúfa efnið jafnt. Takið eftir því að við notum fyrst eigendendana sem selja seljanda fyrst og síðan ekki fyrirfram tilgreindar yfirlýsingar.
Eins auðvelt og þetta er, er notkun þess á þennan hátt vafasamt til notkunar á vefsvæðum. Já, þú getur skipt um fullt af efni í marga dálka, en þetta gæti ekki verið besta lestarupplifunin á vefnum, sérstaklega ef hæð þessara dálka fellur undir "brjóta" skjásins.
Lesendur þurfa þá að fletta upp og niður til þess að geta lesið allt innihaldið. Samt sem áður er skólastjóri CSS dálka eins auðvelt og þú sérð hér og það er hægt að nota til að gera svo mikið meira en bara að skipta um innihald sumra málsgreina - það má örugglega nota til þess að skipta út.
Skipulag með CSS dálkum
Segðu að þú hafir vefsíðu með efni sem inniheldur 3 dálka efnis. Þetta er mjög dæmigerður viðbótarsnið, og til þess að ná þessum 3 dálkum mynduðu venjulega fljóta deildirnar sem eru innir. Með CSS mörgum dálkum er það svo miklu auðveldara.
Hér er nokkur sýnishorn HTML:
Nýjustu fréttir
Efni myndi fara hér ...
Frá okkar blogg
Efnið myndi fara hér ...
Næstu viðburðir
Efni myndi fara hér ...
The CSS til að gera þessar margar dálkar byrjar með það sem þú sást áður:
.content {-moz-column-count: 3; -webkit-dálkur: 3; dálkur: 3; -moz-dálkur-bilið: 30px; -webkit-dálkur-bilið: 30px; dálkur-bil: 30px; }Nú er áskorunin hér að því, þar sem vafrinn vill skipta þessu efni jafnt og svo, ef efnis lengd þessara deilda er öðruvísi, þá mun þessi vafri í raun skipta efni einstakra deilda og bæta við upphaf hennar í eina dálki og þá haltu áfram í annað (þú getur séð þetta með því að nota þennan kóða til að keyra tilraun og bæta við mismunandi lengdum innihalds innan hvers deildar)!
Það er ekki það sem þú vilt. Þú vilt að hver af þessum deildum skapi sérstaka dálk og sama hversu stórt eða lítið efni einstakra deilda er, þá viltu aldrei deila því. Þú getur náð þessu með því að bæta þessum viðbótar línu CSS:
.content div {sýna: inline-block; }Þetta mun neyða þá deildir sem eru inni í "innihaldi" til að vera ósnortinn, jafnvel þótt vafrinn skiptir þessu í margar dálkar. Jafnvel betra, þar sem við höfum ekki gefið neitt hér fastan breidd, munu þessar dálkar sjálfkrafa breyta um leið og vafrinn breytist og gerir þær tilvalin forrit fyrir móttækilegar vefsíður . Með þessum "inline-block" stíl í stað, mun hver af þínum 3 deildum vera greinilegur dálkur efnis.
Notkun dálkbreiddar
Það er önnur eign fyrir utan "dálkatölu" sem þú getur notað og það gæti verið betra fyrir síðuna þína, allt eftir þörfum þínum. Þetta er "dálkbreidd". Notum sömu HTML markup eins og sýnt var áður, gætum við í staðinn gert þetta með CSS okkar:
.content {-moz-column-width: 500px; -webkit-dálkur-breidd: 500px; dálkur-breidd: 500px; -moz-dálkur-bilið: 30px; -webkit-dálkur-bilið: 30px; dálkur-bil: 30px; } .content div {sýna: inline-block; }Leiðin sem þetta virkar er að vafrinn notar þessa "dálkbreidd" sem hámarksverð þess súlunnar. Þannig að ef glugginn er minna en 500 punktar á breidd, þá munu þessar 3 deildir birtast í einum dálki, einn af toppunum annars. Þetta er dæmigerður skipulag sem notaður er fyrir farsíma / smá skjárinn.
Þar sem vafrarbreiddin eykst til að vera nógu stór til að passa 2 dálka ásamt tilgreindum dálkaslóðum, fer vafrinn sjálfkrafa úr einum dálksútlit í tvær dálkar. Haltu áfram að auka skjábreiddina og að lokum fáðu 3 dálka hönnun, þar sem hver og einn af 3 deildum okkar birtist í eigin dálki. Aftur er þetta frábær leið til að fá svör við fjölbreyttum fjölskylduvænum skipulagi og þú þarft ekki einu sinni að nota fjölmiðlafyrirspurnir til að breyta skipulagsstílunum!
Aðrar dálkareiginleikar
Til viðbótar við eiginleika sem eru hér að ofan eru einnig eiginleikar "dálkurregla", þar á meðal lit, stíl og breiddargildi sem leyfir þér að búa til reglur á milli dálka þína. Þetta væri notað í staðinn fyrir landamæri ef þú vilt hafa nokkrar línur sem skilja dálka þína.
Tími til að gera tilraunir
Eins og er er CSS Multiple Column Layout mjög vel studd. Með forskeyti gætu yfir 94% notenda notandans séð þessar stílar og þessi hópur sem ekki er studd myndi í raun bara vera miklu eldri útgáfur af Internet Explorer sem þú getur ekki lengur verið að styðja lengur.
Með þessu stigi stuðnings sem nú er til staðar er engin ástæða til að byrja að gera tilraunir með CSS dálka og beita þessum stílum í tilbúnum tilbúnum vefsíðum. Þú getur byrjað tilraunir þínar með því að nota HTML og CSS sem er kynnt í þessari grein og leika í kringum mismunandi gildi til að sjá hvað myndi virka best fyrir þörfum skipulagssvæðis þíns.