Kolona me lartësi të barabartë për dizajn të përgjegjshëm. Kolona me të njëjtën lartësi

Përkthim: Vlad Merzhevich

Një nga gjërat e pakta që nuk është e lehtë të bësh me CSS është t'i bësh kolonat me të njëjtën lartësi. Ka qasje të ndryshme, secila prej tyre ka të mirat dhe të këqijat e saj, këtu dua të tregoj katër metoda.

Le të mendojmë se çfarë nënkuptojmë me kolona me lartësi të barabartë. Në përgjithësi, ne nuk duam që përmbajtja brenda çdo kolone të jetë e njëjta lartësi. Nëse do të ishte kështu, atëherë nuk ka asnjë problem, pasi lartësitë e kolonës natyrisht do të jenë të njëjta. Në fakt, me kolona me lartësi të barabartë, nënkuptojmë kolona që duken njësoj pa përmbajtje brenda.

Këtë mund ta arrijmë duke shtuar një sfond prapa kolonave në mënyrë që ato të shfaqen me lartësi të barabartë. Si rezultat, marrim një lartësi fiktive të barabartë.

Unë kurrë nuk kam dashur të përdor kolona bedel. Jo sepse kjo është një metodë e keqe, por sepse kam një modë që të mos përdor kurrë një imazh për të qenë një ngjyrë e fortë. Për shkak të kësaj, unë kam zhvilluar metodën time për marrjen e kolonave me të njëjtën lartësi, të cilat do t'i quaj pseudo-kolona për mungesë të një termi më të mirë.

Ajo funksionon në mënyrë të ngjashme me metodën e kolonës dummy, e cila përfshin shtimin e një sfondi në enë. Kjo nuk është një qasje e përgjithshme për kolonat me lartësi të barabartë, kështu që ka një shtrirje të kufizuar, por nëse përballeni me një rast të tillë, gjithçka funksionon në një mënyrë të thjeshtë dhe të lehtë.

HTML

Ne po përdorim të njëjtin HTML si në metodën e kolonës dummy më sipër.

CSS

CSS është përsëri mjaft i thjeshtë. Unë kam zgjedhur një plan urbanistik të lëngshëm për shumëllojshmëri, por ju lehtë mund të ndryshoni gjithçka për një gjerësi fikse.

#container (sfondi: # 555; vërshimi: i fshehur) #përmbajtje (lundrues: majtas; gjerësia: 75%; sfondi: #eee;) #bari anësor (lundrues: majtas; gjerësia: 25%; sfondi: # 555;)

Përveç përdorimit të% në vend të px, vini re se kam vendosur ngjyrën e sfondit për #content dhe #sidebar. Thjesht duhet ta vendosni për çdo kolonë që është më e lartë, por këtu kam vendosur në mënyrë specifike ngjyrën për dy kolona.

Ndryshimi kryesor në krahasim me kolonat dummy është se në vend të një imazhi të sfondit, ne vendosëm një ngjyrë të sfondit. Në thelb, kjo është njësoj si të tregosh ngjyrën e sfondit të një kontejneri përmes një kolone të shkurtër.

Kufizimi është si më poshtë - duhet të dimë paraprakisht se cila kolonë do të jetë më e shkurtër dhe, në mënyrë ideale, kjo kolonë duhet të jetë e njëjtë në të gjitha faqet e faqes. Ky tingëllon si një kufizim mjaft serioz, por në praktikë kam gjetur se një nga dy kolonat është zakonisht më e shkurtër në shumicën, nëse jo të gjitha, faqet. Në faqet ku nuk është kështu, rregullimi është po aq i thjeshtë sa të shtosh pak a shumë përmbajtje.

pro

• Lehtë për t'u personalizuar.
• Lehtë për tu mirëmbajtur.

Minuset

• Më e vështirë për t'u zbatuar për tre ose më shumë kolona.
• Kërkohet të dihet paraprakisht lartësia e kolonave.
• Nuk funksionon kur kolonat janë më të larta ose më të shkurtra në faqe të ndryshme.

Kjo metodë nuk është aspak e përsosur, por do të habiteni se sa shpesh mund të zbatohet në praktikë.

E gjeta këtë metodë jo shumë kohë më parë në Smashing Magazine në një artikull të Thierry Koblenz, megjithëse më vonë gjeta një artikull nga Alan Pearce në A List Apart, shkruar disa vite më parë për të njëjtën metodë. Kufijtë dhe kufijtë negativë përdoren për të dhënë pamjen e kolonave me lartësi të barabartë.

HTML

Nuk ka asgjë të re në HTML në krahasim me atë që pamë më lart. Në artikullin e tij, Thierry përdor trupin si enë, por unë do të qëndroj me përdorimin e kontejnerit div siç bëj zakonisht.

CSS

Argëtimi fillon me CSS. Kontejneri përdoret thjesht për të rregulluar gjerësinë dhe në qendër të paraqitjes. Gjëja interesante ndodh me #content dhe #sidebar.

#container (gjerësia: 960 px; marzhi: 0 automatik;) #përmbajtje (lundrues: majtas; gjerësia: 700 px; kufiri-majtas: 260 px solid # 555;) #bar (lundrues: majtas; gjerësia: 260 px; margjina-djathtas: - 260 px; pozicioni: relative;)

Të gjitha ngjyrat e sfondit në këtë metodë vendosen për kolonën #content. Ne vendosim sfondin si zakonisht dhe më pas shtojmë një kufi të majtë të barabartë me gjerësinë e shiritit anësor. Ngjyra e kufirit përputhet me sfondin e shiritit anësor.

Nëse ndalemi këtu, do të shihni kolonat e shfaqura, megjithatë kufiri ynë i majtë e largon shiritin anësor dhe ne duhet ta kthejmë atë.

Së pari, le t'i japim shiritit anësor një diferencë negative djathtas të barabartë me gjerësinë e saj (ose gjerësinë e kufirit të përmbajtjes së majtë, ato janë të njëjta). Kjo do ta kthejë shiritin anësor aty ku duam, por ende nuk është i dukshëm. Problemi është në rendin e mbivendosjes së dy divave. #përmbajtja qëndron në krye të #barit anësor, kështu që ne duhet ta sjellim #barin anësor përpara. Ne e bëjmë këtë duke shtuar pozicionin: në lidhje me shiritin anësor dhe tani përmbajtja e tij është e dukshme.

pro

• Konfigurimi i lehtë sapo të kuptoni se si funksionon.
• Lehtë për tu mirëmbajtur.

Minuset

• Gjerësia e shiritit anësor duhet të fiksohet pasi gjerësia e kufirit kupton vetëm vlerat absolute.
• Marzhet negative potencialisht mund të çojnë në një gabim në disa versione të vjetra të IE.

Unë rekomandoj të lexoni të dy artikujt me të cilët lidha më lart, pasi ato ofrojnë informacion më të detajuar sesa unë këtu. Të dy artikujt përmbajnë kod për përdorimin e kësaj metode me kolonën e tretë, dhe artikulli i Thierry flet për krijimin e kufijve midis kolonave.

Metoda e fundit u krijua nga Matthew James Taylor. Nga të gjitha metodat e paraqitura këtu, këtë herë do të funksionojë për një shumëllojshmëri të gjerë të rasteve të përdorimit.

E lashë për në fund pasi metoda është paksa komplekse dhe mund t'ju duhet ta lexoni disa herë për të kuptuar se si funksionon.

HTML

HTML është i ngjashëm me atë që pamë më lart, megjithëse do të vini re një kontejner shtesë div.

Ashtu si me metodat e tjera, ne do t'i përdorim këto kontejnerë për të vendosur që ngjyrat e sfondit të duken sikur t'i përkisnin kolonave tona.

CSS

Në CSS po ndodh shumë më tepër sesa kemi parë deri më tani. #sidebar dhe #content lëvizen majtas dhe gjerësia është vendosur, çdo gjë tjetër përveç kësaj është e re.

Çelësi i kësaj metode është ideja se një kontejner lundrues është gjithmonë në të njëjtën lartësi me përmbajtjen e tij. Duke vendosur kolonat tona brenda kontejnerëve lundrues, ne sigurojmë që kontejnerët të jenë të barabartë me lartësinë e kolonës më të gjatë.

# kontejner-jashtë (lundrues: majtas; vërshimi: i fshehur; sfondi: #eee;) # kontejner-brenda (lundrues: majtas; sfond: # 555; pozicioni: relative; djathtas: 75%;) #shirit anësor (lundrues: majtas; gjerësia: 25%; pozicioni: relative; majtas: 75%;) #përmbajtje (lundrues: majtas; gjerësia: 75%; pozicioni: relative; majtas: 75%;)

Hapi i parë është shtimi i notave në kolonat dhe kontejnerët. Unë jam duke përdorur majtas, por drejtimi nuk është i rëndësishëm në këtë rast. Përdorni drejtimin që ju nevojitet për paraqitjen tuaj. Hapi tjetër është vendosja e sfondeve për dy divs. Vendosa një sfond për # container-inner për të marrë atë që dua për shiritin anësor dhe një sfond për # container-outer për të marrë atë që dua për përmbajtjen kryesore.

Nëse ndalemi këtu, do të shohim vetëm sfondin për ndarjen e ndërthurur, pasi është më i lartë se div i jashtëm.

Ne kemi nevojë për pak pozicionim për të lëvizur ndarjen e brendshme në mënyrë që të tregojë vetëm se ku duam të shfaqet shiriti anësor. Kjo do të lejojë që sfondi i div-it të jashtëm të rrjedhë aty ku duam të shfaqet kolona e përmbajtjes.

# enë-brendi (pozicioni: relative; djathtas: 75%;)

Vendosni kolonën e brendshme dhe vendosni vlerën e duhur në 75%, e cila është e njëjtë me gjerësinë e kolonës së përmbajtjes.

Sfondet janë në vend, por përmbajtja e të dy kolonave është zhvendosur gjithashtu 75% majtas. Duhet t'i rrëshqisim në vend.

#bari anësor (pozicioni: relative; majtas: 75%;) #përmbajtje (pozicioni: relative; majtas: 75%;)

Zbatojmë sërish pozicionimin relativ dhe meqenëse përmbajtja e të dy kolonave është zhvendosur 75% në të majtë, duhet ta kthejmë atë 75% në të djathtë. Le ta bëjmë këtë duke vendosur vlerën e majtë në 75%. Tani gjithçka është kthyer aty ku duhet.

pro

• Funksionon pavarësisht se cila kolonë është më e gjatë ose më e shkurtër.
• Punon me çdo lloj shtrirjeje (fikse, gome, elastike, etj.).
• Mund të bëni sa më shumë kolona që dëshironi.

Minuset

• Pak e vështirë për t'u kuptuar në fillim.
• Kërkohen diva shtesë josemantike.

Në përgjithësi, kjo është metoda më e besueshme dhe është e garantuar të funksionojë në çdo situatë. Ju inkurajoj të luani me këtë për ta kuptuar realisht dhe të lexoni disa herë artikullin e Mateut.

Artikulli i Matthew vjen me një plan urbanistik me tre kolona dhe ai gjithashtu ka një demonstrim për katër dhe pesë kolona. Vendosa të tregoj një plan urbanistik me dy kolona me shpresën se do ta bëjë më të lehtë për t'u kuptuar idenë.

Burime Shtesë

Këto nuk janë aspak metodat e vetme për krijimin e kolonave me lartësi të barabartë. Chris Coyer ndau disa teknika të tjera në CSS Tricks pak kohë më parë që mund t'i preferoni nga ato të paraqitura këtu.

Ka edhe shumë metoda të tjera që mund t'i gjeni me pak kërkim. Unë mendoj se ky artikull dhe artikulli i Chris mbulojnë shumicën e metodave më të zakonshme.

Përmbledhje

Kolonat me lartësi të barabartë janë një veçori e dëshirueshme e dizajnit, por ato nuk janë gjithmonë të lehta për t'u arritur me paraqitjet CSS. Idealisht duhet të përdorim diçka si lartësia: 100% dhe kaq, por tani për tani mund të përdorim ndonjë nga metodat e përmendura më sipër.

lehtë për t'u konfiguruar, por nevojitet një kërkesë shtesë HTTP për imazhin dhe çdo ndryshim i paraqitjes kërkon një imazh të ri.

edhe më e thjeshtë, por me përdorim të kufizuar për rastet kur lartësitë relative të të dy kolonave janë të njohura dhe konstante nëpër faqe.

janë relativisht të lehta për t'u përdorur, nuk kërkojnë largpamësi të lartësive të altoparlantëve dhe janë shumë të adaptueshëm për altoparlantë të shumtë. Ju duhet vetëm një kolonë që të jetë një gjerësi fikse.

funksionon në shumicën e rasteve. Ju nuk keni nevojë të dini për lartësinë e kolonave paraprakisht dhe mund të punoni me çdo numër kolonash që dëshironi. Kjo metodë është pak më e ndërlikuar se të tjerat.

Me kalimin e kohës, pres një zgjidhje standarde më të thjeshtë, por tani për tani, këto katër metoda duhet të jenë të mjaftueshme për projektin tuaj.

Sa shpesh hartoni një plan urbanistik me kolona me lartësi të barabartë? Çfarë metode për të krijuar kolona përdorni?

• Përkthimi

Më parë, kur gjithçka shtrohej duke përdorur tabela, ishte shumë e lehtë të krijoheshin kolona me të njëjtën lartësi. Mjafton të krijoni një tabelë, për shembull, me 3 kolona dhe ato automatikisht do të kenë të njëjtën lartësi. Por faqosja e bllokut nuk është aq e thjeshtë.
Në këtë artikull, unë do t'ju tregoj disa nga mënyrat për të krijuar kolona me lartësi të barabartë dhe përputhshmërinë e këtyre metodave me shfletuesit (përfshirë IE6). Të gjitha këto metoda përshkruajnë se si të krijoni një plan urbanistik me 3 kolona.

Metoda 1: Përdorimi i vetive të ekranit: tabelë

Për të zbatuar paraqitjen, përdoret një listë (ul) ose një bllok div me blloqe të mbivendosur për rreshtin dhe secilën nga kolonat. Div mbyllës është caktuar për të shfaqur: tabelë, dhe çdo bllok kolone e vendosur është vendosur të shfaqë: tabelë-qelizë.
Le të shohim një shembull me një listë.
Kodi HTML:

• ..... Shumë përmbajtje ....


• ..... Shumë përmbajtje ....


• ..... Shumë përmbajtje ....

CSS:

.bazë (
/ * e bëjnë atë 100% gjerësi dhe një minimum prej 1000 px gjerësi * /
gjerësia: auto;
margjina-majtas: 0px;
margin-djathtas: 0px;
Min-gjerësia: 1000px;
mbushje: 0px;
shfaqja: tabela;
}
Rreshti bazë (
Ekrani: rreshti i tabelës;
}
.bazë li (
shfaqja: qeliza e tabelës;
gjerësia: 33%;
}
.qeliza1 (
ngjyra e sfondit: # f00;
}
.qeliza 2 (
ngjyra e sfondit: # 0f0;
}
.qeliza 3 (
ngjyra e sfondit: # 00f;
}

Përparësitë:

Kjo është mënyra më e thjeshtë dhe më e lehtë për të krijuar kolona me lartësi të barabartë, ndryshe nga metodat e tjera.
Nuk do të jetë e mundur të krijohet një mbushje e jashtme (diferencë, si hapësira e qelizave për tabelat) për të gjitha kolonat, megjithatë, ajo mund të zëvendësohet me një kufi të bardhë (ose ngjyrën e sfondit të kolonës) me një gjerësi të përshtatshme për të simuluar mbushjen.

Të metat:

Kjo metodë nuk funksionon në shfletuesit IE7 dhe më poshtë. Do të duhet shumë kohë (kur IE7 të bëhet IE6 i ri) përpara se të mund ta përdorim me siguri këtë metodë.

Metoda 2: Përdorimi i JavaScript

Kjo metodë bazohet në një kod të vogël JS (JQuery) që "rregullon" lartësinë e dëshiruar për secilën kolonë bazuar në lartësinë e asaj më të gjatë.
Kodi HTML:

... Shumë përmbajtje ...

…. Shumë përmbajtje...

... Shumë përmbajtje ...

CSS:

.konteiner (
Gjerësia: 900 px;
Margjina-majtas: auto;
Margin-djathtas: auto;
}
.bari i majtë (
Float: majtas;
Gjerësia: 33%;
}
.përmbajtja (
Float: majtas;
Gjerësia: 33%;
}
.bari i djathtë (
Float: majtas;
Gjerësia: 33%;
}

JavaScript (jQuery):

funksioni setEqualHeight (kolona)
{
var kolona më e lartë = 0;
kolona.secila (
funksioni ()
{
Lartësia aktuale = $ (kjo) .lartësia ();
nëse (currentHeight> kolona më e lartë)
{
kolona më e lartë = Lartësia aktuale;
}
}
);
kolonat.lartësia (kolona më e lartë);
}
$ (dokument) .ready (funksion () (
setEqualHeight ($ (". kontejner> div"));
});

Ju mund të vendosni kodin JS në një skedar të veçantë dhe ta thërrisni atë drejtpërdrejt në kodin HTML. Në këtë rast, inicializimi i jQuery duhet të jetë më i lartë në kod.
Kodi që duhet të ndryshoni është emri i klasës së bllokut që krijon kolonat. Në këtë shembull, kjo është klasa e kontejnerit:

Ju mund të ndryshoni emrin e klasës së bllokut me kolona, ​​ose madje të shtoni një klasë në secilën kolonë bllok dhe t'i përdorni ato veçmas për lehtësi.

Përparësitë:

Avantazhi kryesor i kësaj metode është se funksionon në të gjithë shfletuesit dhe nuk keni nevojë të sforcoheni me CSS për të lidhur lartësinë.

Të metat:

Nëse JavaScript është i çaktivizuar, në përputhje me rrethanat, kolonat nuk do të kenë lartësi të barabartë. Por, si rregull, ky është një rast shumë i rrallë, sepse shumica e faqeve moderne kërkojnë që JavaScript të aktivizohet.

Metoda 3: altoparlantë artificialë

Kjo metodë u shpik nga një nga të parët që zbatoi kolona me të njëjtën lartësi. Thelbi i tij është që një sfond që imiton kolonat i caktohet bllokut të inkuadrimit (shih figurën më poshtë). Ato thjesht mbivendosen në këtë sfond. Efekti i lartësisë së barabartë krijohet duke përsëritur sfondin.

Kodi HTML:

CSS:

.konteiner (
background-image: tile.png;
sfond-përsërit: përsëritje-y;
gjerësia: 900 px;
margjina-majtas: auto;
margin-djathtas: auto;

Shiriti anësor i majtë (
noton: majtas;
gjerësia: 200 px;
}

permbajtja (
noton: majtas;
gjerësia: 400 px;
}

djathtas (
noton: majtas;
gjerësia: 300 px;
}

me e qarte (
qartë: të dyja;
}

Përparësitë:

Zbatim shumë i thjeshtë.

Të metat:

Kjo metodë mund të përdoret vetëm për paraqitjet / kolonat me gjerësi fikse.

Metoda 4: duke përdorur blloqe të veçanta me sfond

Kjo metodë mbështetet në përdorimin e div-ve të veçanta, secila me sfondin e vet dhe lartësinë e elementit që përmban.
Kodi HTML:

... Shumë përmbajtje ...

... Shumë përmbajtje ...

... Shumë përmbajtje ...

CSS:

.mbrapa djathtas (
gjerësia: 100%;
noton: majtas;
ngjyra e sfondit: jeshile;
vërshoj: i fshehur;
pozicioni: i afërm;
}
.përmbajtje (
noton: majtas;
ngjyra e sfondit: blu;
gjerësia: 100%;
pozicioni: i afërm;
djathtas: 300px; / * Gjerësia e shiritit anësor të djathtë * /
}
.mbrapa e majtë (
gjerësia: 100%;
pozicioni: i afërm;
djathtas: 400 px; / * gjerësia e zonës së përmbajtjes * /
noton: majtas;
ngjyra e sfondit: # f00;
}

enë (
gjerësia: 900 px;
margjina-majtas: auto;
margin-djathtas: auto;
}

Shiriti anësor i majtë (
noton: majtas;
gjerësia: 200 px;
vërshoj: i fshehur;
pozicioni: i afërm;
majtas: 700px;
}

permbajtja (
noton: majtas;
gjerësia: 400 px;
vërshoj: i fshehur;
pozicioni: i afërm;
majtas: 700px;
}

Shiriti i të drejtave (
noton: majtas;
vërshoj: i fshehur;
gjerësia: 300 px;
ngjyra e sfondit: # 333;
pozicioni: i afërm;
majtas: 700px;
}

Nuk duket e lehtë, apo jo? Gjëja kryesore është të kuptoni 5 pika kryesore:

1. .rightback, .contentback dhe .leftback përmbajnë elemente .leftsidebar, .content dhe .rightsidebar, të cilët nga ana e tyre përmbajnë tekst.
2. Secili prej blloqeve të mbivendosur është përgjegjës për ngjyrën / sfondin e kolonës. Në këtë shembull
   .mbrapa e majtë plotëson kërkesat e shiritit të majtë,
   .përmbajtje - .përmbajtje
   dhe .mbrapa e djathtë - .bari i djathtë.
3. Me përjashtim të atij të fundit (përgjegjës për kolonën më të djathtë), secili prej blloqeve
   vendosni një diferencë të djathtë të barabartë me gjerësinë e elementit ngjitur djathtas që përmban sfondin. Në këtë shembull, .contentback (përgjegjës për sfondin. përmbajtje) zhvendoset majtas me 300 px (që është gjerësia e shiritit .djathtas). (shih figurën më poshtë)
4. Kolonat .leftsidebar, .content dhe .rightsidebar renditen njëra pas tjetrës me një gjerësi të caktuar.
5. Ato ofrojnë dhëmbëzimin majtas të barabartë me shumën e gjerësisë së secilës prej kolonave, me përjashtim të asaj më të djathtën. ato. ato janë të barabarta = gjerësia.barshi i djathtë (300px) dhe .përmbajtja (400px) = 700px. (B + G)

Figura më poshtë tregon se si janë pozicionuar blloqet .rightback, .contentback dhe .leftback. E majta e skajshme është .rigthback, e djathta ekstreme është .leftback.

Vija me pika tregon zonën e dukshme të kolonave (kutia .backback është prerë me tejmbushje: e fshehur).
Në foton më poshtë, vijat e zeza poshtë të kuqes janë përmbajtja e elementeve.