Prijevod: Vlad Merzhevich
Jedna od rijetkih stvari koje nije lako učiniti sa CSS-om je pravljenje stupaca iste visine. Postoje različiti pristupi, svaki od njih ima svoje prednosti i nedostatke, ovdje želim pokazati četiri metode.
Hajde da razmislimo o tome šta podrazumevamo pod stubovima iste visine. Obično ne želimo da sadržaj unutar svake kolone bude iste visine. Da je to slučaj, onda ne bi bilo problema jer bi visina stubova prirodno bila ista. Ono što zaista mislimo pod kolonama jednake visine jesu kolone koje izgledaju isto bez sadržaja unutar.
To možemo postići dodavanjem pozadine iza zvučnika tako da izgledaju kao da su jednake visine. Kao rezultat, dobijamo fiktivnu identičnu visinu.
Nikada nisam želio koristiti lažne zvučnike. Ne zato što je to loša metoda, već zato što imam jednu stvar - nikada ne koristite sliku kao punu boju. Zbog toga sam razvio sopstvenu metodu za dobijanje kolona iste visine, koje ću u nedostatku boljeg izraza nazvati pseudo-kolone.
Radi slično metodi lažne kolone, koja uključuje dodavanje pozadine u kontejner. Ovo nije opći pristup stupovima iste visine, tako da ima ograničen domet, ali ako naiđete na takav slučaj, sve funkcionira lako i jednostavno.
HTML
Koristimo isti HTML kao u gornjoj metodi lažne kolone.
Glavni sadržaj
CSS
CSS je opet prilično jednostavan. Radi raznolikosti, izabrao sam fluidan raspored, ali možete lako konfigurirati sve za fiksnu širinu.
#container (pozadina: #555; overflow: hidden ) #content (float:left; width:75%; background:#eee; ) #sidebar (float:left; width:25%; background:#555; )
Osim što koristim % umjesto px, primijetite da sam postavio boju pozadine za #content i #sidebar. Sve što treba da uradite je da ga podesite za bilo koju kolonu koja će biti viša, ali ovde sam posebno postavio boju za dve kolone.
Glavna promjena u odnosu na lažne kolone je da umjesto pozadinske slike postavljamo boju pozadine. U osnovi, ovo je isto kao i prikazivanje boje pozadine kontejnera kroz kratku kolonu.
Ograničenje je sljedeće - moramo unaprijed znati koja će kolona biti kraća i idealno bi bilo da ova kolona bude takva na svim stranicama stranice. Ovo zvuči kao prilično ozbiljno ograničenje, ali u praksi smatram da je jedna od dvije kolone obično kraća na većini, ako ne i na svim stranicama. Na stranicama na kojima to nije slučaj, popravak je jednostavan kao dodavanje više ili manje sadržaja.
pros
- Jednostavan za postavljanje.
- Jednostavan za održavanje.
Minusi
- Teže je implementirati za tri ili više kolona.
- Morate unaprijed znati visinu stupova.
- Ne radi kada su kolone viši ili kraći na različitim stranicama.
Ova metoda je daleko od savršene, ali ćete se iznenaditi koliko se često može koristiti u praksi.
Ne tako davno sam naišao na ovu metodu u Smashing Magazinu u članku Thierryja Coblentza, iako sam kasnije pronašao članak Alana Pearcea na A List Apart napisan prije nekoliko godina o istoj metodi. Ivice i negativni padding se koriste za stvaranje izgleda kolona jednake visine.
HTML
Nema ništa novo u HTML-u u poređenju sa onim što smo videli gore. U svom članku, Thierry koristi tijelo kao kontejner, ali ja ću se držati korištenja div kontejnera kao što to obično radim.
Glavni sadržaj
CSS
CSS je mjesto gdje zabava počinje. Kontejner se jednostavno koristi za zadržavanje širine i centriranje rasporeda. Zanimljive stvari se dešavaju sa #content i #sidebarom.
#container ( width:960px; margin: 0 auto; ) #content (float:left; width:700px; border-left: 260px solid #555; ) #sidebar (float: left; width:260px; margin-right: - 260px; pozicija: relativna; )
Sve boje pozadine u ovoj metodi su postavljene na kolonu #content. Postavljamo pozadinu kao i obično, a zatim dodajemo lijevu ivicu jednaku širini bočne trake. Boja ivice odgovara pozadini bočne trake.
Ako se ovdje zaustavimo, vidjet ćete da se kolone prikazuju, ali naša lijeva ivica gura bočnu traku i moramo je vratiti.
Prvo, dajmo bočnoj traci negativnu desnu marginu jednaku njenoj širini (ili širini lijevog ruba sadržaja, oni su isti). Ovo će vratiti bočnu traku tamo gdje je želimo, ali još uvijek nije vidljiva. Problem je redoslijed slaganja dva diva. #content je na vrhu #sidebar , tako da moramo da pomerimo #sidebar napred. Učinimo to dodavanjem pozicije: u odnosu na bočnu traku tako da je sada vidljiv njen sadržaj.
pros
- Jednostavno podešavanje kada shvatite kako funkcionira.
- Jednostavan za održavanje.
Minusi
- Širina bočne trake mora biti fiksna jer granica-width razumije samo apsolutne vrijednosti.
- Negativne margine mogu potencijalno uzrokovati grešku u nekim starijim verzijama IE-a.
Preporučujem da pročitate oba članka na linku iznad, jer oni nude detaljnije informacije nego što ja pružam ovdje. Oba članka sadrže kod za korištenje ove metode s trećom kolonom, a Thierryjev članak govori o stvaranju granica između stupaca.
Posljednju metodu kreirao je Matthew James Taylor. Od svih ovdje predstavljenih metoda, ovaj put će raditi u širokom rasponu slučajeva upotrebe.
Ostavio sam ga do kraja jer je metoda malo komplikovana i možda ćete je morati pročitati nekoliko puta da biste shvatili kako funkcionira.
HTML
HTML je sličan onome što smo vidjeli gore, iako ćete primijetiti dodatni div kontejner.
Glavni sadržaj
Kao i kod drugih metoda, koristit ćemo ove kontejnere da postavimo boje pozadine tako da izgledaju kao da pripadaju našim kolonama.
CSS
U CSS-u se dešava nešto više nego što smo vidjeli do sada. #sidebar i #content imaju float vrijednost lijevo i širina je postavljena, sve ostalo je novo.
Ključ ove metode je ideja da je plutajući kontejner uvijek iste visine kao i njegov sadržaj. Postavljanjem naših stubova unutar plutajućih kontejnera, osiguravamo da će kontejneri biti jednaki visini najduže kolone.
#container-outer ( float:left; overflow: hidden; background: #eee; ) #container-inner (float:left; background: #555; pozicija: relativna; desno:75%; ) #sidebar (float: left; širina: 25%; pozicija: relativna; lijevo: 75%; ) #sadržaj ( float: lijevo; širina: 75%; položaj: relativna; lijevo: 75%; )
Prvi korak je dodavanje float kolonama i kontejnerima. Koristim lijevu vrijednost, ali smjer u ovom slučaju nije važan. Koristite smjer potreban za vaš izgled. Sljedeći korak je postavljanje pozadine za dva diva. Postavio sam pozadinu za #container-inner da dobijem ono što želim za bočnu traku i pozadinu za #container-outer da dobijem ono što želim za glavni sadržaj.
Ako stanemo ovdje, vidjet ćemo samo pozadinu za unutrašnji div, budući da je viši po redu slaganja od vanjskog diva.
Potrebno nam je malo pozicioniranja da pomerimo unutrašnji div tako da pokazuje samo gde želimo da se pojavi bočna traka. Ovo će omogućiti da se pozadina vanjskog diva prikaže kroz mjesto na kojem želimo prikazati stupac sadržaja.
#container-inner (pozicija: relativna; desno: 75%; )
Postavite unutrašnju kolonu i postavite pravu vrijednost na 75%, ista je širina stupca sadržaja.
Pozadine su i dalje tu, ali je sadržaj obje kolone također pomaknut 75% ulijevo. Moramo da ih pomerimo na svoje mesto.
#sidebar ( pozicija: relativna; lijevo:75%; ) #content (pozicija: relativna; lijevo:75%; )
Ponovo koristimo relativno pozicioniranje, a pošto se sadržaj obe kolone pomerio 75% ulevo, moramo da ga pomerimo nazad 75% udesno. Uradimo to tako što ćemo lijevu vrijednost postaviti na 75%. Sada se sve vratilo tamo gde treba da bude.
pros
- Radi bez obzira koji je stupac viši ili kraći.
- Radi sa bilo kojom vrstom rasporeda (fiksni, gumeni, elastični itd.).
- Možete napraviti onoliko kolona koliko želite.
Minusi
- U početku je malo teško razumjeti.
- Potrebni su dodatni nesemantički divovi.
Sve u svemu, ovo je najpouzdanija metoda i zajamčeno funkcionira u svakoj situaciji. Ohrabrujem vas da se poigrate s ovim za pravo razumijevanje i pročitate Matthewov članak nekoliko puta.
Matthewov članak prikazuje raspored u tri stupca, a on također ima demo za četiri i pet stupaca. Odlučio sam prikazati izgled u dvije kolone u nadi da će to olakšati razumijevanje ideje.
Dodatni resursi
Ovo nipošto nisu jedine metode za kreiranje kolona jednake visine. Chris Coyer je prije nekog vremena podijelio nekoliko drugih tehnika na CSS trikovima koje bi vam mogle biti draže od ovdje predstavljenih.
Postoje i mnoge druge metode koje se mogu pronaći uz malo pretraživanja. Mislim da ovaj članak i Chris pokrivaju većinu uobičajenih metoda.
Sažetak
Stubovi jednake visine su poželjna karakteristika dizajna, ali ih nije uvijek lako postići korištenjem CSS izgleda. U idealnom slučaju koristili bismo nešto poput visine: 100% i to bi bilo to, ali za sada možemo koristiti bilo koju od gore navedenih metoda.
lako se postavljaju, ali zahtijevaju dodatni HTTP zahtjev za sliku, a svaka promjena izgleda zahtijeva novu sliku.
još jednostavnije, ali imaju ograničenu upotrebu u slučajevima kada je relativna visina oba stupca poznata i konstantna na stranicama.
relativno su laki za upotrebu, ne zahtevaju predviđanje visine stubova i savršeno se prilagođavaju više kolona. Treba vam samo jedna kolona da bude fiksne širine.
radi u većini slučajeva. Ne morate unaprijed znati o visini stupaca i možete raditi s bilo kojim brojem stupaca koji želite. Ova metoda je malo složenija od ostalih.
S vremenom očekujem jednostavnije standardno rješenje, ali za sada bi ove četiri metode trebale biti dovoljne za vaš projekat.
Koliko često dizajnirate raspored sa kolonama jednake visine? Koju metodu kreiranja kolona koristite?
- Prevod
Ranije, kada se sve radilo pomoću tabela, bilo je vrlo lako kreirati kolone iste visine. Dovoljno je napraviti tabelu, na primjer, sa 3 kolone i sve će automatski imati istu visinu. Ali u blok rasporedu nije sve tako jednostavno.
U ovom članku ću vam pokazati neke načine za kreiranje kolona jednake visine i kako su ove metode kompatibilne sa pretraživačima (uključujući IE6). Sve ove metode opisuju kreiranje izgleda sa 3 kolone.
Metoda 1: Upotreba svojstva display: table
Za implementaciju rasporeda koristite listu (ul) ili div blok sa ugniježđenim blokovima za red i svaku kolonu. Graničnom divu je dat prikaz vrijednosti: tablica, a svakom ugniježđenom bloku stupca dat je prikaz vrijednosti: tablica-ćelija.Pogledajmo primjer sa listom.
HTML kod:
CSS:
.base(
/* neka bude 100% širine i minimalno 1000px širine*/
širina: auto;
margin-left: 0px;
margin-desno: 0px;
min-width: 1000px;
padding: 0px;
display:table;
}
.base-row (
Prikaz: tabela-red;
}
.baseli (
displej: ćelija tabele;
širina: 33%;
}
.cell1 (
boja pozadine: #f00;
}
.cell2 (
boja pozadine: #0f0;
}
.cell3 (
boja pozadine: #00f;
}
Prednosti:
Ovo je najjednostavniji i najlakši način za stvaranje stupaca jednake visine, za razliku od drugih metoda.Nije moguće kreirati vanjsku marginu (marginu, poput razmaka ćelija za tabele) koja je jednaka za sve kolone; međutim, može se zamijeniti bijelim rubom (ili bojom pozadine stupca) s odgovarajućom širinom kako bi se simulirala margina.
Nedostaci:
Ova metoda ne radi u pretraživačima IE7 i starijim. Proći će dosta vremena (kada IE7 postane novi IE6) prije nego što možemo bezbedno koristiti ovu metodu.Metoda 2: Upotreba JavaScripta
Ova metoda se zasniva na upotrebi malog JS koda (JQuery) koji „uređuje“ željenu visinu za svaku kolonu na osnovu visine najduže.HTML kod:
…. Puno sadržaja…
CSS:
.container(
Širina: 900px;
Margina-lijevo: auto;
Margin-desno: auto;
}
.leftsidebar(
Float: lijevo;
Širina: 33%;
}
.content(
Float: lijevo;
Širina: 33%;
}
.rightsidebar(
Float: lijevo;
Širina: 33%;
}
JavaScript (jQuery):
funkcija setEqualHeight(kolone)
{
var tallestcolumn = 0;
columns.each(
funkcija()
{
currentHeight = $(ovo).height();
if (trenutna visina > najviši stupac)
{
najviši stupac = trenutna visina;
}
}
);
columns.height(tallestcolumn);
}
$(document).ready(function() (
setEqualHeight($(".container > div"));
});
Možete staviti JS kod u posebnu datoteku i pozvati ga direktno u HTML kodu. U ovom slučaju, JQuery inicijalizacija bi trebala biti smještena iznad koda.
Kod koji trebate promijeniti je ime klase bloka koja kreira stupce. U ovom primjeru, ovo je klasa kontejnera:
Možete promijeniti ime klase bloka stupaca ili čak dodati klasu svakom bloku stupca i koristiti ih zasebno radi praktičnosti.
Prednosti:
Glavna prednost metode je što radi u svim pretraživačima i ne morate se mučiti sa CSS kodom da biste poravnali visinu.Nedostaci:
Ako je JavaScript onemogućen, kolone neće biti jednake visine. Ali, po pravilu, ovo je veoma redak slučaj, jer... Većina modernih web stranica zahtijeva da JS bude omogućen.Metoda 3: umjetni stupovi
Ova metoda je bila jedna od prvih koja je implementirala stupove iste visine. Njegova suština je da se bloku za uokvirivanje dodjeljuje pozadina koja imitira stupove (vidi sliku ispod). Oni su jednostavno postavljeni na ovu pozadinu. Efekat jednake visine stvara se pozadinom koja se ponavlja.HTML kod:
CSS:
.container(
background-image: tile.png;
background-repeat: repeat-y;
širina: 900px;
margin-left: auto;
margin-right: auto;Lijeva bočna traka (
float: lijevo;
širina: 200px;
}Sadržaj (
float: lijevo;
širina: 400px;
}tačno (
float:left;
širina: 300px;
}jasnije (
jasno: oba;
}
Prednosti:
Vrlo jednostavna implementacija.Nedostaci:
Ova metoda se može koristiti samo za rasporede/kolone fiksne širine.Metoda 4: Korištenje zasebnih blokova s pozadinom
Ova metoda se temelji na korištenju zasebnih divova, od kojih svaki ima svoju pozadinu i uzima visinu elementa koji sadrži.HTML kod:
…mnogo sadržaja…
CSS:
.desni bek(
širina: 100%;
float:left;
boja pozadine: zelena;
overflow:hidden;
pozicija:relativna;
}
.contentback(
float:left;
boja pozadine:plava;
širina: 100%;
pozicija:relativna;
desno: 300px; /* širina desne bočne trake */
}
.leftback(
širina: 100%;
pozicija:relativna;
desno: 400px; /* širina područja sadržaja */
float:left;
boja pozadine: #f00;
}Kontejner (
širina: 900px;
margin-left: auto;
margin-right:auto;
}Lijeva bočna traka (
float:left;
širina: 200px;
overflow:hidden;
pozicija:relativna;
lijevo: 700px;
}Sadržaj (
float:left;
širina: 400px;
overflow:hidden;
pozicija:relativna;
lijevo: 700px;
}Desna bočna traka (
float:left;
overflow:hidden;
širina: 300px;
background-color:#333;
pozicija:relativna;
lijevo: 700px;
}
Ne izgleda lako, zar ne? Glavna stvar je razumjeti 5 glavnih tačaka:
- .rightback, .contentback i .leftback sadrže elemente .leftsidebar, .content i .rightsidebar, koji zauzvrat sadrže tekst.
- Svaki od ugniježđenih blokova odgovoran je za boju/pozadinu kolone. U ovom primjeru
.leftback susreće .leftsidebar,
.contentback – .content
i .desna strana – .desna bočna traka. - Osim posljednjeg (odgovornog za krajnju desnu kolonu), svaki od blokova desni padding je postavljen jednak širini elementa pored desne strane koji sadrži pozadinu. U ovom primjeru, .contentback (odgovoran za background.content) je pomaknut ulijevo za 300px (što je širina block.rightsidebara). (pogledajte sliku ispod)
- Kolone .leftsidebar, .content i .rightsidebar nalaze se jedna iza druge sa određenom širinom.
- Oni pružaju lijevu marginu jednaku zbiru širine svake kolone, osim krajnje desne. One. jednaki su=width.rightsidebar(300px) i.content(400px) = 700px.(B+G)
Slika ispod pokazuje kako su raspoređeni blokovi .rightback, .contentback i .leftback. Onaj krajnje lijevo je .rightback, onaj krajnje desno je .leftback.
Isprekidana linija prikazuje vidljivo područje kolona (desni zadnji blok je isječen sa prelivom: skriven).
Na slici ispod, crne linije koje se nalaze ispod crvenih su sadržaj elemenata.leftsidebar, .content i .rightsidebar, ako im je dato svojstvo float:left i odgovarajuću širinu.
Sva 3 elementa su pomaknuta lijevo od C, koristeći relativnu poziciju.
C=B+G
Ova metoda je detaljno opisana uOva stranica opisuje primjere koji vam to omogućavaju stubovi iste visine u rasporedu sa blok rasporedom. Za mnoge početnike dizajnera izgleda, ovo je definitivan problem, jer ako visina kolona rasporeda nije eksplicitno specificirana, onda se oni protežu dovoljno da prihvate svoj sadržaj. Shodno tome, ispada da umjesto iste visine, svaka kolona u rasporedu ima svoju, što ne izgleda baš lijepo.
Radi veće jasnoće, svi primjeri koriste rasporede sa pritisnuto podnožje. Stoga vam skrećem pažnju na činjenicu da su neki blokovi ili CSS svojstva koji su uključeni u kreiranje kolona iste visine već prisutni u izgledima u početku. Odnosno, na kraju obavljaju dvostruke funkcije - pritiskaju podnožje na dno i povlače stupove. Međutim, radi veće pogodnosti, bit će isporučena samo ona svojstva koja crtaju stupce CSS komentari, i nije bitno da li se koriste u neku drugu svrhu ili ne.
Stubovi iste visine koristeći pozicioniranje
Ovaj primjer se zasniva na principu dodatnih pseudo-kolona i apsolutnog pozicioniranja. Da biste to učinili, kreira se nekoliko blokova (prema broju kolona), koji se rastežu do pune visine stranice i postavljaju ispod stvarnih kolona. Da bi se stvorio efekat kolona iste visine, ovim pseudokolonama se daje potrebna boja pozadine.
web stranica - kolone iste visine, pozicioniranje KapaSadržajOpis primjera
- Svi blokovi rasporeda bili su umotani u dodatni blok omota id="wrapper" kojem je data minimalna visina (CSS) od 100% tako da bi se protezao do pune visine prozora pretraživača, ali se mogao i dalje rastegnuti ako je potrebno. Ali pošto se procentualna visina izračunava u odnosu na pretka, morali smo je navesti i za oznake i za . U odnosu na ovaj blok omota pozicioniraćemo naše pseudo-kolone, zbog čega mu je dodato CSS svojstvo :relative.
- Na dnu izgleda kreirane su same pseudo-kolone sa ID-om jednakim “menu_back”, “sidebar_back” i “content_back”, na koje je primijenjeno apsolutno pozicioniranje. Osim toga, bočnim pseudostupcima su date širine (CSS) i pomakne koordinate (CSS, i), dok su središnjoj date samo offset koordinate kako bi zauzele istu poziciju kao i stvarne kolone. Pa, da bi se pseudo-kolone protegnule do pune visine omotača, dobile su CSS svojstvo :100%.
- Kao rezultat djelovanja druge tačke, iako su se naši zamišljeni stupovi ispružili kako se očekivalo i zauzeli željenu poziciju, bili su smješteni na vrhu blokova glavnog rasporeda. A sve zato što je korišteno apsolutno pozicioniranje, koje izvlači elemente iz glavnog toka. Da bi to popravili, dobili su negativnu CSS vrijednost, koja ih je "stavila" pod izgled. Sve je spremno.
- U principu, možete napustiti središnju pseudo kolonu jednostavnim postavljanjem željene boje za cijelu stranicu stranice.
Pošto Internet Explorer 6 ima problema sa ovom metodom kreiranja kolona iste visine, za ovu metodu je korišćeno nekoliko metoda. hacks:
- IE6 to ne razumije, ali radi s njim kao da je minimalna visina. Takođe u određenoj situaciji ovaj pretraživač ignoriše pravilo. Ove dvije karakteristike su korištene da se, s jedne strane, postavi minimalna visina omotača, a s druge strane, da ne ometaju druge pretraživače.
- U ovom primeru, IE6 samo proteže pseudo-kolone do visine „prvog ekrana“, ali razume izraz(document.body.offsetHeight), koji dinamički izračunava visinu. Tako se koristio za stalnu zamjenu željene vrijednosti u nekretninu.
- I dalje, IE6 ne radi sa “content_back”, jer njegova širina nije eksplicitno postavljena. Ovdje, naravno, možete podesiti njegovu širinu na 100% i “staviti ga” čak niže od njegove braće sa strane, dajući mu odvojeno :-2, ali da li se isplati?
Kolone jednake visine koristeći pozadinsku sliku
Ovaj primjer je najjednostavniji za implementaciju i sastoji se u činjenici da se kreira mala "horizontalna" slika, koja se sastoji od nekoliko boja (prema broju stupaca), koja se zatim "množi" okomito, simulirajući stupce. Nažalost, ova metoda je prikladna samo za fiksne izglede i ne zaboravite da u pregledniku s onemogućenim slikama neće biti stupaca.
web stranica - kolone jednake visine, pozadinska slika KapaSadržajMože se vidjeti pozadinska slika koja je korištena u primjeru. Uz njegovu pomoć stvoren je izgled stupova iste visine.
Opis primjera
- Fiksni raspored ima blok omotača koji zapravo čini izgled fiksnim. Tako on postavlja pozadinsku sliku (CSS), koja se množi okomito.
Kolone jednake visine koristeći margine i padding
Ovaj primjer koristi prilično neobičnu tehniku. Prvo, svim stupcima daju se vrlo velike donje margine, zbog čega se rastežu, a zatim donje margine iste veličine, ali negativne vrijednosti. Na kraju se jednostavno odsiječe sve što je “ekstra”.
web stranica - kolone iste visine, margine i padding KapaSadržajOpis primjera
- Da biste povećali donji padding, svojstvo s vrlo velikom vrijednošću se primjenjuje na sve stupce.
- Kolonama se daje negativna margina podnožja (CSS) jednaka navedenom dopunu. Međutim, u ovom konkretnom slučaju, veličina ovog polja je 100px manja. To je zato što metoda korištena u ovom primjeru za pritiskanje podnožja zahtijeva donju marginu jednaku veličini visini podnožja. Ukupno dobijemo: 30000px-29900px=100px.
- Rezultat druge tačke je smanjenje visine omotača (id = "wrapper") na takvu veličinu kao da nije došlo do povećanja stupaca. Odnosno, za njega su postali jednaki po visini na osnovu sadržaja (u našem slučaju on dodaje tih istih 100px), iako su vizuelno ostali 30000px visine. Drugim riječima, jednostavno se protežu daleko iza ruba omotača.
- Svojstvo CSS :hidden se primjenjuje na blok omotača kako bi se uklonilo sve što je izvan njegovih granica. Kao rezultat toga, imamo prekrasne zvučnike iste visine.
Ova metoda je unakrsna i svi je razumeju, uključujući i Internet Explorer 6. Ali zajedno sa načinom na koji je pritisnuto podnožje, odbija da radi ispravno. Nisam smislio nove "štake" za ovog starca, već naprotiv, uklonio sam par svojstava koja mu pomažu da pritisne podnožje. Stoga, kada dodajete sadržaj u kolone, u IE6 sve teče kako se očekuje.
Ova kratka lekcija o CSS posvećena onima koji žele da savladaju raspored blokova. Danas ćemo razmotriti pitanje kreiranja 2 kolone iste visine koristeći blokove, a ne tabele.
Ova vještina se primjenjuje gotovo svuda, čak i kada postavljate standardni raspored sa 2 kolone, naići ćete na ovaj problem ako postavljate u blokove. Ova lekcija također ima za cilj razvijanje razumijevanja principa samog rasporeda blokova.
Pogledajte sliku ispod. Koristeći tabele, ovaj rezultat se postiže automatski.
Ali sa blokovima je sve drugačije. Pogledajte 2 kolone raspoređene u blokovima.
Zašto se ovo dešava?
Odgovor je jednostavan. Činjenica je da je tabela holistički element u kojem svaka ćelija zavisi od druge, zbog čega se nastavlja dalje. Blok je zaseban, nezavisan element i nikada se neće ponašati kao tabela!
Dakle, isti rezultat ćemo postići uz pomoć blokova koje smo postigli sa tablicama, koristeći male trikove.
Ima ih mnogo, ali danas ću vam dati najjednostavniji i najrazumljiviji trik za početnika. Jednostavno ćemo staviti oba bloka u drugi blok koji će ih kombinovati i ovom bloku dati pozadinu koja nam je potrebna. Budući da će se cijeli blok nastaviti do kraja najvećeg bloka, njegova pozadina će se širiti prema dolje.
Pogledajmo kako to izgleda na dijagramu.
Sada idemo direktno na kod.
Kreiranje stubova iste visine
Ut wisi enim ad minim veniam,
quis nostrud exerci taion ullamcorper suscipit lobortis nisl
ut aliquip ex en commodo consequat. Duis te feugifacilisi per
suscipit lobortis nisl ut aliquip ex en commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Sada da shvatimo šta je šta.
Zatim napravimo pozadinsku sliku. Širina našeg glavnog bloka bit će jednaka 700 px. Stoga će širina pozadinske slike biti 700px. Možete postaviti bilo koju visinu ovisno o vašoj pozadini.
Napravio sam ovakvu sliku i nazvao je teksturom.gif
Sada da vidimo šta se desilo u CSS-u
#main (width:700px; margin:0 auto; background-image:url(textured.gif); background-repeat:repeat-y; )
#one (width:400px; float:left;)
#dva (širina:300px;)Sada, ako pogledamo rezultat, vidjet ćemo sljedeće:
Da zaključim ovaj tutorijal, radi boljeg razumijevanja, dat ću primjer s izmijenjenom pozadinskom slikom.Napravio sam ovu pozadinu i nazvao je teksturiran1.gif
Naravno, u skladu s tim sam promijenio jedno od svojstava u CSS-u.
#main (širina:700px; margina:0 auto ; background-image:url(textured1.gif); background-repeat:repeat-y; )
Evo šta se dogodilo:
P.S. od Maxima: ovaj efekat ne radi kod mene u Firefoxu.
U današnjem članku želim govoriti o novom načinu kreiranja kolona jednake visine koristeći CSS. Više nije potreban Javascript da bi visine stupaca bile iste za sve. Suština ove metode je korištenje novog CSS3 svojstva koje nam daje mnogo više opcija od pukog kreiranja stupaca iste visine. Ali u ovoj lekciji ćemo pogledati koliko je lako riješiti ovaj bolan problem.
Izgled stranice
HTML dio
Definirajmo dvije kolone koje ćemo kasnije učiniti jednakima po visini koristeći CSS:
1 2 3 4 5 6 7 8 id = "stranica" > <div id = "glavni" > </div> To jest, moramo napraviti blok
sa ličnom kartom main i blok imao istu visinu, bez obzira na sadržaj unutar bilo kojeg. Ali to nije sve što treba učiniti. Na malim ekranima, stranu treba postaviti ispod glavnog bloka sadržaja. To ćemo učiniti radi lakšeg pregleda na mobilnim uređajima.Stubovi iste visine
CSS dio
Definirajmo flexbox za glavni kontejner, koji sadrži dva bloka:
Odlično! Sada ostaje podesiti širinu za središnji blok s glavnim sadržajem i za bočnu traku:
Objašnjenja:
- flex-grow— koliko jedan pojedinačni blok može biti veći od susjednih elemenata.
- flex-shrink— određuje sposobnost smanjenja ako je potrebno.
Naša stranica je blizu završetka. Ali kada se blok sa glavnim sadržajem suzi, stranica postaje veoma duga. Stoga, na određenoj širini ekrana, možemo učiniti da bočna traka ide ispod bloka s glavnim sadržajem i da bude zgodna za gledanje na mobilnim uređajima:
Evo koda bez prefiksa tako da ne zauzima puno prostora i ne izgleda glomazno. Možete dobiti primjer koji u potpunosti radi pomoću gumba na početku članka.
Također treba reći gdje ova metoda funkcionira. Pošto je ovo svojstvo sasvim novo, radi u modernim pretraživačima Firefox, Chrome, Safari, Opera i IE 11.
Zaključak
U ovom članku naučili ste kako napraviti stupce iste visine koristeći CSS. Ali ovo nisu sve mogućnosti ovog CSS svojstva. Svojstvo flex vam omogućava da blokove napravite gumenim, automatski rasporedite elemente u nekoliko kolona ili redova, koji zauzimaju cijelu slobodnu površinu i još mnogo toga.
Ali mi smo u ovom članku raspravljali o najosnovnijem i, što je najvažnije, najčešće korištenom rješenju za izgled stranice.
Najbolji članci na ovu temu
