coloane Div-Nye de aceeași înălțime pe css

Acasă »Articole» coloana DIV-Nye de aceeași înălțime în CSS

Prin ocupație, se confruntă cu nevoile de novice webmasteri pentru a marca pagina magazinului online cadru strict în funcție de capriciile clientului, este necesar, din când în când solicita unele lucruri mici, și de a ajuta în găsirea de soluții probleme pulmonare atipice.

Să presupunem că aveți următorul marcaj: pălărie, trei difuzoare (stânga, centru, dreapta) și subsolul paginii.

Pasul 1 Mai întâi de toate, înveliți în viitoarele coloane DIV-container. De exemplu, atribuie o clasă de coloane.

Pasul 2 Rămâne să se înregistreze pe site-ul următoarele stiluri:

Aici vom spune browser-ului care au nevoie de materiale de ambalare, containere care arată modul în care masa de bloc din întreaga lățime a părintelui, cu excepții pentru dimensiune distorsiuni neprevăzute a tabelului, vă rugăm să ia în considerare la granițele sale (plus o marjă scăzută părți -otstupy amortizabile în mod intenționat, în caz contrar, dimensiunea va fi distorsionată). Dar încorporat în acest înveliș DIV-uri nevoia primara de a arăta modul în care celula a tabelului cu lățimea reglabilă și aceeași apreciere a mărimii celulelor de-a lungul granițelor lor, mai degrabă decât de-a lungul limitelor de conținut conținute în ele (ajustarea înălțimii a browser-ului în sine face).

Notă În CSS2 nu acceptă proprietatea box-dimensionare. astfel încât pentru browsere mai vechi, dacă doriți să specificați dimensiunea celulelor, ar trebui să se facă minus frontiera - și -otstupov umplutură.

Etapa 3 (opțional). Acum, dacă, de exemplu, a vrut să facă o coloană laterală a o dimensiune fixă, în stil trebuie doar să se înregistreze coloanele dorite de mărime de limitare. Să presupunem că dorim coloana din stânga - 300 de pixeli, iar dreapta - 200 de pixeli și, în plus față de cut-off a vorbit din neatenție părțile de margine ale conținutului său.

Notă Specificațiile relației de obiecte, așa cum este utilizat pentru a arăta un exemplu, este necesar să se garanteze funcționarea doar regulile de stil pentru coloana specifice înveliș deținute în mod direct. Un caz luarea în considerare a suplimentare cu NOINDEX servește scopului de a lucra în situația când site-ul SEO-Schnick a decis să închidă o coloană separată de indicele de motoarele de căutare (în prezent în structura de magazine online este partea fundamentală).

avantaje evidente

punerea în aplicare simplă;
garantat aceeași înălțime a coloanelor;
coloană reordonate, dacă este necesar;
adăugați cu ușurință coloane suplimentare sau elimina de prisos;
Coloana ascunse cu ușurință de indexare în eticheta de ambalaj noindex;
nu fluctuează este o soluție, astfel încât nu există nici un defect „cădere de pe coloana la o nouă linie.“

Important SEO-bucată de această soluție este aceea că stilul DIV-difuzor nu deteriora pagina de promovare a motorului de căutare de sub celula din tabel. La urma urmei, în conformitate cu caietul de sarcini, reguli de stil descriu modul în care va apărea marcajul de pe ecranul browser-ului, și, în orice caz, nu suprascrie tipul de conținut al elementului. Aceasta este, în exemplul de mai sus, stilul necesită doar browser-ul pentru a afișa celulele tabelului DIV-coloana LIKE. În afară de celulele lor, și anume pentru a arăta modul în care celulele. Ca browser-ul și crawler trebuie să interpreteze element este setat tag-ul elementului. În acest exemplu, marcajele indicate pe coloană care necesită interpretat ca DIV (secțiunea divizare,), dar nu și TD (diviziune tabel, tabele partiție), pe baza numai că elementul va fi similar ca aspect cu o celulă.

deficiențe

nu funcționează în browserele IE6, IE7 - ei nu au susținut inițial afișajul de proprietate: stiluri de masă;
browser-ul Safari 3.1 necesită de două ori pentru înfășurare DIV-uri - aici afișa proprietate: tabelul-celulă a prima relație de obiect copil funcționează prin a avea o pereche de containere părinte imbricate una în alta cu proprietățile de afișare: masă și afișare: tabel de rând;
Nu puteți utiliza marja -otstupy laterală în ambalaj DIV și dacă în același timp, lățimea l nu a cerut în formă lățimea: auto. pentru că atunci când se analizează dimensiunea browser-ul obiectului nu ia în considerare dimensiunea marjei -otstupov, prin urmare, marginea din dreapta a obiectului „du-te departe“, mai departe decât dispozițiile privind valoarea liniuță de inventar;
în difuzoare nu va funcționa cere marja -otstupy, deoarece browser-ul ignoră toate posibile de manipulare a unor astfel de margini în obiecte pentru a afișa proprietate: masă celulară;
strict coloanele de fixare fixe lățime, indiferent de lățimea conținutului acestora (adică, atunci când regiunea coloanei nu este deplasată, chiar dacă partea indisolubilă a conținutului vylezut marginii), stocate numai când se specifică trei mărimi restrictive (proprietăți lățime. min lățime. max-lățime) în absolut unități, în timp ce utilizarea mărimii relative, să zicem 20% nu asigură retenția lățimii la partea inseparabilă a conținutului, permite ca implicit browser-ul la un credit auto coloane cu lățimi peste spațiu coloane adiacente clasifică tionary sau lățime: dimensiune auto.

demonstraţie live

imperacms.ru/examples/css-div-cells/index.html - aceasta pagina demo se face pe baza fragmentelor de cod de mai sus. Doar toate (cod html și css-norme) sunt combinate într-un singur fisier HTML. În plus, difuzoarele sunt vopsite în culori diferite și au adăugat conținut multi-line, care a fost imediat efect clar.

discuție

Design receptivă a devenit norma. Este încă dinozauri vii coloana dub?

Ciliate, cumpara creierul. Design receptivă și înălțimea coloanelor nu este același lucru.

Și totuși. Trebuie încă să se întâlnească în șabloane equalheight plug-in. Poate că o decizie bazată pe js aliniază blocuri mai bine.

EqualHeight nici mai bine, nici mai rău. Acesta este conceput pentru a bootstrap șabloane. Nivelarea cu css acolo efectua problematică.

Acest carduri plug-in pentru produsele fac doar aliniază perfect. Și nu mai știu unde altundeva ar putea fi aplicate.