Unul dintre momentele dificile când se utilizează CSS este de a seta aceeași înălțime pentru coloane. Există diferite metode, fiecare dintre ele având avantajele și dezavantajele sale. În această lecție vom examina patru dintre ele.
Ce înțelegem prin coloane de înălțime egală?
Acest efect poate fi obținut prin utilizarea unui fundal CSS care va avea aceeași înălțime pentru coloane.
Acesta este un truc destul de vechi, care este folosit pe scară largă pentru a crea coloane de înălțime egală.
Aceasta constă în utilizarea unei imagini de fundal repetate pe verticală. Un exemplu al unei astfel de imagini este dat mai jos (pentru claritate, este ușor mărit).
O astfel de imagine, de regulă, are 1 înălțime și o lățime egală cu lățimea șablonului.
În exemplu, se utilizează următorul marcaj:
Puteți utiliza eticheta corporală ca container. Exemplul folosește un element separat div pentru a demonstra modul în care metoda poate fi aplicată unei porțiuni din conținutul paginii.
Codul CSS este foarte simplu. Deplasăm blocurile plutitoare #sidebar și #content în stânga și setăm lățimea corespunzătoare pentru ele. Setați liniuțele pentru containerul #container.
Ca fundal pentru container, vom folosi imaginea faux-column.png (la fel ca cea descrisă mai sus). De asemenea, este setată proprietatea de overflow: hidden. Este necesar pentru a preveni prăbușirea containerului.
Containerul va avea întotdeauna aceeași înălțime ca cea mai mare coloană. Prin urmare, imaginea de fundal va arăta ca și cum difuzoarele au aceeași înălțime.
Această metodă este folosită cel mai bine în șabloanele fixe, dar poate fi aplicată cu succes în cele mai multe șabloane plutitoare.
De asemenea, puteți utiliza întreaga gamă de instrumente vizuale pentru fundal (umbre, cadre și așa mai departe). De asemenea, puteți utiliza imagini cu înălțime mai mare de 1 px.
- Doar implementați ..
- Funcționează indiferent de înălțimea coloanei.
- Este necesară o imagine care utilizează o cerere HTTP suplimentară.
- Schimbările în șablon necesită modificări ale imaginilor.
Această metodă utilizează, de asemenea, setările de fundal pentru container. În ciuda faptului că metoda pseudo coloană are o aplicare limitată, este foarte simplă și funcționează perfect.
Marcarea este utilizată la fel ca în metoda precedentă:
Codul CSS este, de asemenea, foarte simplu. Exemplul folosește lățimea plutitoare a coloanelor, dar puteți utiliza și valori fixe.
Am setat culoarea de fundal pentru elementele #content și #sidebar. Este necesar să setați culoarea pentru coloana care ar trebui să fie cea mai lungă.
Principala diferență față de metoda coloanelor false este folosirea culorii de fundal în locul imaginii. Principiul de funcționare este același - containerul cu fundal este întins pe înălțimea coloanei superioare și se formează o imagine în care toate coloanele par să aibă aceeași înălțime.
- Este ușor de implementat.
- Ușor de întreținut.
- Este dificil de realizat pentru numărul de coloane mai mare de 2.
- Este nevoie de cunoaștere a coloanei care va fi mai lungă.
- Nu funcționează în șabloane, când pe pagini diferite aceeași coloană se dovedește a fi mai lungă decât toate, apoi mai scurtă.
Această metodă utilizează un cadru de coloană și linii negative pentru a forma o iluzie a unor înălțimi egale ale coloanelor.
Marcajul HTML nu se deosebește de metodele anterioare:
Dar codul CSS este mai interesant. Containerul are o lățime fixă și este centrat pe pagină. Proprietățile elementelor #sidebar și #content au valori interesante:
Toate culorile care sunt utilizate în această metodă sunt setate în proprietățile elementului #content. Pentru aceasta, culoarea de fundal este setată, iar lățimea cadrului este setată la egal cu lățimea barei laterale. Culoarea frontală este cea utilizată pentru fundalul buclei laterale.
Primul pas este să setați placa dreaptă a panoului lateral la o valoare negativă egală cu lățimea sa. Așa că împinge pe ecran. Problema este acum în ordinea suprapunerii elementelor unul asupra celuilalt. Elementul #sidebar este în partea de sus. Pentru a returna bara laterală în partea de sus, setați poziția: proprietate relativă pentru ea.
- Funcționează indiferent de coloana care este mai lungă.
- Doar instalați.
- Ușor de întreținut.
- Bara laterală trebuie să aibă o lățime fixă, deoarece proprietatea lățimii de margine are valori absolute.
- Valorile negative ale indentării nu pot fi acceptate în versiunile mai vechi ale IE.
Această metodă este mai greu de înțeles decât restul.
În marcaj, se adaugă un element div suplimentar.
Codul CSS pentru această metodă este mai complex decât pentru metodele de aliniere de mai sus. Pentru ambele #sidebar și #content, setați proprietățile părții laterale și lățimii stângi și, de asemenea, altceva.
În primul rând, coloanele și containerele plutesc. În exemplu, totul este deplasat spre stânga, dar direcția de deplasare nu joacă un rol important.
Apoi setați fundalul pentru cele două contacte div. Containerul interior are un fundal bara laterală, în exterior - fundalul conținutului principal.
Dacă acum verificați ce afișează browserul, numai fundalul containerului interior va fi vizibil, deoarece este situat mai sus în ordinea de stivuire a elementelor.
Pentru a poziționa recipientul interior, setați proprietatea sa la dreapta la 75%, care este egală cu lățimea coloanei de conținut principal.
Setați poziționarea relativă și valoarea proprietății din stânga la 75% pentru a muta totul spre dreapta.
- Metoda funcționează indiferent de lățimea coloanelor
- Metoda funcționează în orice șabloane.
- Puteți genera câte coloane doriți.
- Metoda este suficient de complexă pentru înțelegere.
- Este necesar un element div suplimentar.
concluzie
Prin obținerea de informații imediat prin două canale (vedere și auz), eficiența predării este mult mai mare decât învățarea din cărți. Și temele și testele online vă vor permite să gândiți în mod constant în limba pe care o învățați și să vă verificați imediat cunoștințele!
Dacă doriți să învățați HTML mult timp, atunci am o veste bună pentru dvs.!
Dacă ați învățat deja HTML și doriți să treceți mai departe, următorul pas este să învățați tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!
Articole similare
Trimiteți-le prietenilor: