Coloana de aceeași înălțime

Când adăugați conținut la aceste blocuri nu mai pot fi aliniate, pe măsură ce nu va ajunge pentru a pune aceeași cantitate de conținut în fiecare coloană, iar unul dintre ele este sigur de a deveni vecin mai mare.

Cum cele două difuzoare de aceeași mărime

HTML5 și CSS3 practica de la zero la rezultatul!

Pentru locațiile ambalatorului

packer Metoda situată relativ coloană amplasată în interiorul div-ambalatorului, și apoi pot fi aplicate la ambalatorul în poziția div: relativă. Apoi se adaugă la coloanele de poziție: absolută, setarea de top: 0, care va pune boxele pe partea de sus a ambalatorului și a instala de jos: 0, provocând ambele dintre ele va fi în toată înălțimea div-înfășurare.

Din cauza poziției: absolută nu se poate utiliza marja de indentare între diferite difuzoare, așa că va trebui să se aplice la a doua coloană a proprietății din stânga.

Problema cu utilizarea tabelelor CSS

CSS metoda tabelelor divuri defineste HTML ca un tabel, care va forța browser pentru a afișa aceste elemente în exact modul în care s-ar comporta cu tabel HTML. HTML pentru acest scop poate fi exact la fel ca și un înveliș relativ poziționat: are un DIV-packer cu două coloane interioare.

Pentru a le crea ca tabel CSS, aveți nevoie pentru a determina modul în care tabelul DIV-ambalatorului; acest lucru poate fi realizat cu tabelul de afișare valoarea proprietății. În continuare avem nevoie pentru a defini coloana ca o celulă în tabel, fă-o din nou cu afișajul de proprietate, de data aceasta cu o valoare de masă de celule. Apoi am rămas doar cu-navsegozayavit că dimensiunea coloanelor este de 100% din dimensiunea mesei.

Rezolvarea problemei folosind tabele HTML

Rezolvarea problemei cu ajutorul HTML- este modul de modă veche de fixare site-ul de marcare înainte de a aplica CSS, tot ce trebuie să faceți - să se asigure că înălțimea celor două coloane este de 100% din înălțimea mesei.

Rezolvarea problemei cu jQuery

Soluție jQuery pe bază de par să nu vă mai curat și frumos, dar are un avantaj real, - nu este necesar pentru a schimba codul HTML creat anterior și CSS. HTML aici înseamnă că vom fi umplut cu doar două conținut în coloană.

În această decizie, CSS definește doar stilul div, făcându-l o anumită lățime, folosind marja, creând un fel de difuzor.

În continuare, dorim sa cream o functie jQuery care va redimensiona coloanele, astfel încât acestea să devină aceeași înălțime. Funcția următoare va căuta prin toate coloanele și a obține înălțimea cea mai lungă dintre ele. Apoi, înălțimea poate fi salvat într-o variabilă și de a schimba coloanele, astfel încât acestea să devină egală cu această înălțime.

Revizie: Echipa webformyself.

HTML5 și CSS3 practica de la zero la rezultatul!

Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram