Pou anpil ane, CSS flote yo te yon pwensipal, ankò nesesè, eleman nan kreye kouman sit entènèt. Si konsepsyon ou rele pou plizyè kolòn, ou tounen vin jwenn flote . Pwoblèm nan ak metòd sa a se ke, malgre entèlijans la enkwayab ke konsèpteur entènèt / devlopè yo te montre nan kreye kouman sit konplèks, CSS flote pa janm te reyèlman vle di ke yo dwe itilize nan fason sa.
Pandan ke flote ak CSS pwezante yo asire w ke gen yon plas nan konsepsyon sit entènèt pou anpil ane rive, pi nouvo teknik layout ki gen ladan CSS Grid ak Flexbox yo kounye a bay konsèpteur entènèt nouvo fason yo kreye kouman sit yo. Yon lòt teknik Layout nouvo ki montre anpil nan potansyèl la se Kolòn miltip CSS.
Columns CSS yo te alantou pou kèk ane kounye a, men manke sipò nan pi gran navigatè (sitou ki pi gran vèsyon nan Internet Explorer) te kenbe pwofesyonèl entènèt anpil nan lè l sèvi avèk estil sa yo nan travay pwodiksyon yo.
Avèk fen sipò pou moun ki pi gran vèsyon IE, kèk konsèpteur entènèt yo kounye a fè eksperyans ak opsyon nouvo CSS layout, Columns CSS enkli, ak jwenn yo ke yo gen anpil plis kontwòl ak sa yo nouvo apwòch pase yo te fè ak flote.
Basics yo nan kolòn CSS
Kòm non li sijere, CSS Kolòn miltip (ke yo rele tou CSS3 milti-kolòn Layout) pèmèt ou fann kontni nan yon seri kantite kolòn. Pwopriyete CSS ki pi fondamantal ou ta itilize yo se:
- kolòn-konte
- kolòn-espas
Pou kolòn-konte, ou presize kantite kolòn ou vle. Gap nan kolòn ta dwe goutyè yo oswa espas ant sa yo kolòn. Navigatè a pral pran valè sa yo epi divize kontni an nan kantite kolòn ou presize.
Yon egzanp komen nan kolòn CSS miltip nan pratik ta dwe fann yon blòk nan kontni tèks nan kolòn miltip, menm jan ak sa ou ta wè nan yon atik jounal. Di ou gen HTML makup kap vini an (sonje ke pou rezon egzanp, mwen sèlman mete kòmanse nan yon sèl paragraf, pandan ke yo nan pratik gen ta gen anpil chans paragraf miltip nan kontni nan sa a markup):
tit la nan atik ou a
Imajine anpil nan paragraf nan tèks isit la ...
Si ou Lè sa a, ekri sa yo Styles CSS:
.kontent {-moz-kolòn-konte: 3; -webkit-kolòn-konte: 3; kolòn-konte: 3; -moz-kolòn-espas: 30px; -webkit-kolòn-espas: 30px; kolòn-espas: 30px; }}Règleman sa a CSS ta fann divizyon "kontni" a nan 3 kolòn egal ak yon espas de 30 pikse ant yo. Si ou te vle de kolòn olye pou yo 3, ou ta senpleman chanje valè sa a ak navigatè a ta kalkile latè yo nouvo nan kolòn sa yo fann kontni an respire. Avi ke nou itilize pwopriyete machann-prefiks yo an premye, ki te swiv pa deklarasyon ki pa prefiks yo.
Kòm fasil tankou sa a se, itilize li nan fason sa a se dout pou itilize sou sit wèb. Wi, ou ka fann yon pakèt moun sou kontni nan kolòn miltip, men sa pa ka eksperyans nan lekti pi bon pou entènèt la, espesyalman si wotè kolòn sa yo tonbe anba "pliye" ekran an.
Lektè ta Lè sa a, yo gen woulo liv moute ak desann yo nan lòd yo li kontni an plen. Toujou, direktè lekòl la nan Column CSS se fasil tankou ou wè isit la, epi li ka itilize yo fè sa pi plis pase jis fann kontni an nan kèk paragraf - li ka, tout bon, yo dwe itilize pou layout.
Layout Avèk kolòn CSS
Di ke ou gen yon Paj Web ak yon zòn kontni ki gen 3 kolòn nan kontni. Sa a se yon Layout sit entènèt trè tipik, ak reyalize sa yo 3 kolòn, ou ta nòmalman flote divizyon yo ki nan. Avèk CSS miltip-kolòn, li se konsa pi fasil.
Men kèk egzanp HTML:
Dènye Nouvèl
Content ta ale isit la ...
= > Soti nan Blog nou an
Content ta ale isit la ...
Evènman kap vini
p div
CSS la fè kolòn miltip sa yo kòmanse ak sa ou te wè deja:
.kontent {-moz-kolòn-konte: 3; -webkit-kolòn-konte: 3; kolòn-konte: 3; -moz-kolòn-espas: 30px; -webkit-kolòn-espas: 30px; kolòn-espas: 30px; }} Koulye a, defi a isit la se ke, depi navigatè a vle fann kontni sa a respire, kidonk si longè a kontni nan divizyon sa yo se diferan, ki navigatè pral aktyèlman divize kontni an nan yon divizyon endividyèl, pandan l ajoute kòmansman an nan li nan yon sèl kolòn ak Lè sa a, kontinye nan yon lòt (ou ka wè sa a lè l sèvi avèk kòd sa a nan kouri yon eksperyans epi ajoute longè diferan nan kontni anndan chak divizyon)!
Sa se pa sa ou vle. Ou vle chak nan divizyon sa yo yo kreye yon kolòn distenk, epi, pa gen pwoblèm ki jan gwo oswa ti yon kontni divizyon endividyèl la ka, ou pa janm vle li fann. Ou ka reyalize sa lè ou ajoute yon sèl liy adisyonèl nan CSS:
.kontent div {ekspozisyon: inline-blòk; }} Sa a pral fòse divizyon sa yo ki andedan nan "kontni an" yo rete entak menm jan navigatè a divite sa a nan kolòn miltip. Menm pi byen, depi nou pa t 'bay anyen isit la yon lajè fiks, sa yo kolòn pral otomatikman rdimansyonman kòm navigatè a rdimansyon, fè yo yon aplikasyon ideyal pou sit entènèt reponn . Avèk sa a "aliye-blòk" style nan plas, chak nan 3 divizyon ou yo pral yon kolòn diferan nan kontni.
Sèvi ak kolòn-Lajè
Gen yon lòt pwopriyete san konte "kolòn-konte" ke ou ka itilize, epi depann de bezwen layout ou, li ka aktyèlman yon chwa pi bon pou sit ou. Sa a se "kolòn-lajè". Sèvi ak menm markup a HTML jan yo montre deja, nou te kapab olye fè sa ak CSS nou an:
.content {-moz-kolòn-lajè: 500px; -webkit-kolòn-lajè: 500px; kolòn-lajè: 500px; -moz-kolòn-espas: 30px; -webkit-kolòn-espas: 30px; kolòn-espas: 30px; } .kontan div {ekspozisyon: inline-blòk; }} Fason ke sa a ap travay se ke navigatè a itilize sa a "kolòn-lajè" kòm valè maksimòm nan ki kolòn. Se konsa, si fenèt navigatè a se mwens pase 500 piksèl lajè, sa yo divizyon 3 ta parèt nan yon sèl kolòn, youn nan tèt yo nan yon lòt. Sa a se yon Layout tipik itilize pou kouman mobil / ti ekran.
Kòm lajè navigatè a ogmante yo dwe gwo ase nan anfòm 2 kolòn ansanm ak espèk yo espas espesifik, navigatè a pral otomatikman ale soti nan yon layout kolòn sèl nan de kolòn. Kenbe ogmante lajè ekran ak evantyèlman, ou pral jwenn yon konsepsyon kolòn 3, ak chak nan 3 divizyon nou an parèt nan kolòn pwòp yo. Yon fwa ankò, sa a se yon bon fason yo ka resevwa kèk reyaksyon, milti-aparèy kouman zanmitay , epi ou pa menm bezwen sèvi ak queries medya yo chanje estil yo Layout!
Lòt pwopriyete kolòn
Anplis de sa nan pwopriyete ki kouvri isit la, genyen tou pwopriyete pou "kolòn-règ", ki gen ladan koulè, style, ak lajè valè ki pèmèt ou kreye règ ant kolòn ou. Sa yo ta dwe itilize olye pou yo fwontyè si ou vle gen kèk liy separe kolòn ou.
Tan Eksperyans
Kounye a, CSS Plizyè kolòn Layout trè byen sipòte. Avèk prefiks, sou 94% nan itilizatè entènèt ta kapab wè sa yo Styles, e ke gwoup sipòte ta vrèman jis gen anpil vèsyon ki pi ansyen nan Internet Explorer ki ou pa ka sipòte ankò de tout fason.
Avèk nivo sa a nan sipò kounye a nan plas, pa gen okenn rezon pa yo kòmanse fè eksperyans ak Columns CSS ak deplwaye estil sa yo nan sit pwodiksyon pare. Ou ka kòmanse eksperyans ou lè l sèvi avèk HTML a ak CSS prezante nan atik sa a epi jwe otou ak valè diferan yo wè sa ki ta travay pi byen pou bezwen layout sit ou a.
> Soti nan Blog nou an
Content ta ale isit la ...
Evènman kap vini
p div
CSS la fè kolòn miltip sa yo kòmanse ak sa ou te wè deja:
.kontent {-moz-kolòn-konte: 3; -webkit-kolòn-konte: 3; kolòn-konte: 3; -moz-kolòn-espas: 30px; -webkit-kolòn-espas: 30px; kolòn-espas: 30px; }}Koulye a, defi a isit la se ke, depi navigatè a vle fann kontni sa a respire, kidonk si longè a kontni nan divizyon sa yo se diferan, ki navigatè pral aktyèlman divize kontni an nan yon divizyon endividyèl, pandan l ajoute kòmansman an nan li nan yon sèl kolòn ak Lè sa a, kontinye nan yon lòt (ou ka wè sa a lè l sèvi avèk kòd sa a nan kouri yon eksperyans epi ajoute longè diferan nan kontni anndan chak divizyon)!
Sa se pa sa ou vle. Ou vle chak nan divizyon sa yo yo kreye yon kolòn distenk, epi, pa gen pwoblèm ki jan gwo oswa ti yon kontni divizyon endividyèl la ka, ou pa janm vle li fann. Ou ka reyalize sa lè ou ajoute yon sèl liy adisyonèl nan CSS:
.kontent div {ekspozisyon: inline-blòk; }}Sa a pral fòse divizyon sa yo ki andedan nan "kontni an" yo rete entak menm jan navigatè a divite sa a nan kolòn miltip. Menm pi byen, depi nou pa t 'bay anyen isit la yon lajè fiks, sa yo kolòn pral otomatikman rdimansyonman kòm navigatè a rdimansyon, fè yo yon aplikasyon ideyal pou sit entènèt reponn . Avèk sa a "aliye-blòk" style nan plas, chak nan 3 divizyon ou yo pral yon kolòn diferan nan kontni.
Sèvi ak kolòn-Lajè
Gen yon lòt pwopriyete san konte "kolòn-konte" ke ou ka itilize, epi depann de bezwen layout ou, li ka aktyèlman yon chwa pi bon pou sit ou. Sa a se "kolòn-lajè". Sèvi ak menm markup a HTML jan yo montre deja, nou te kapab olye fè sa ak CSS nou an:
.content {-moz-kolòn-lajè: 500px; -webkit-kolòn-lajè: 500px; kolòn-lajè: 500px; -moz-kolòn-espas: 30px; -webkit-kolòn-espas: 30px; kolòn-espas: 30px; } .kontan div {ekspozisyon: inline-blòk; }}Fason ke sa a ap travay se ke navigatè a itilize sa a "kolòn-lajè" kòm valè maksimòm nan ki kolòn. Se konsa, si fenèt navigatè a se mwens pase 500 piksèl lajè, sa yo divizyon 3 ta parèt nan yon sèl kolòn, youn nan tèt yo nan yon lòt. Sa a se yon Layout tipik itilize pou kouman mobil / ti ekran.
Kòm lajè navigatè a ogmante yo dwe gwo ase nan anfòm 2 kolòn ansanm ak espèk yo espas espesifik, navigatè a pral otomatikman ale soti nan yon layout kolòn sèl nan de kolòn. Kenbe ogmante lajè ekran ak evantyèlman, ou pral jwenn yon konsepsyon kolòn 3, ak chak nan 3 divizyon nou an parèt nan kolòn pwòp yo. Yon fwa ankò, sa a se yon bon fason yo ka resevwa kèk reyaksyon, milti-aparèy kouman zanmitay , epi ou pa menm bezwen sèvi ak queries medya yo chanje estil yo Layout!
Lòt pwopriyete kolòn
Anplis de sa nan pwopriyete ki kouvri isit la, genyen tou pwopriyete pou "kolòn-règ", ki gen ladan koulè, style, ak lajè valè ki pèmèt ou kreye règ ant kolòn ou. Sa yo ta dwe itilize olye pou yo fwontyè si ou vle gen kèk liy separe kolòn ou.
Tan Eksperyans
Kounye a, CSS Plizyè kolòn Layout trè byen sipòte. Avèk prefiks, sou 94% nan itilizatè entènèt ta kapab wè sa yo Styles, e ke gwoup sipòte ta vrèman jis gen anpil vèsyon ki pi ansyen nan Internet Explorer ki ou pa ka sipòte ankò de tout fason.
Avèk nivo sa a nan sipò kounye a nan plas, pa gen okenn rezon pa yo kòmanse fè eksperyans ak Columns CSS ak deplwaye estil sa yo nan sit pwodiksyon pare. Ou ka kòmanse eksperyans ou lè l sèvi avèk HTML a ak CSS prezante nan atik sa a epi jwe otou ak valè diferan yo wè sa ki ta travay pi byen pou bezwen layout sit ou a.