Alinierea înălțimea containerelor în aspectul divami, master-ul web

Cred că toți cei care dau seama de beneficiile de straturi de aspect la un aspect de masă, sau în imposibilitatea de a acorda o atenție la una, ca și pentru mine, un dezavantaj semnificativ al modelului de bloc. Ce este? Aceasta este înălțimea konteynerov.Rabotaya pe un alt proiect, am încercat mai multe soluții la această problemă, și cu care vreau să vă prezint acest articol.

Din păcate, dacă vom folosi un aspect de trei sau două coloane pentru a impune „straturi“, rezultatul ar fi înălțimea containerelor este complet independent de înălțimea blocurilor vecine. Și va depinde în mod direct de pe blocul de conținut aplicat pe aceasta și regulile de indentare (padding). În ciuda tuturor neajunsurilor sale, masa, așa cum au fost, prin ele însele, să rezolve această problemă datorită conexiunii de coloane adiacente. În cazul utilizării blocurilor de la priza avem o containere complet independente.

Exemplu pagina
tabel cu aspect

Exemplu dispunerea de „straturi“

Deci, de exemplu, trebuie să se alinieze înălțimea containerului, indiferent de conținutul lor. Există două moduri de a face acest lucru. Primul este exclusiv decizia de proiectare, iar a doua JavaSript de utilizat.

Utilizarea isklyuchitelnoCSS

Deci, prima cale este numit „coloana false“ și esența ei este foarte simplu și banal. Foarte bună descriere a acestei metode poate fi găsită în coloanele Dan Sederholm Faux. Conform acestui exemplu utilizează o imagine de fundal, pentru care repetarea pe verticală, și ca rezultat obținut același efect în difuzoarele de înălțime.

background: url #ccc (../ images / bg_birch_800.gif) repeat-y 50 0%;

Esența ei constă în faptul că primul raport se calculează în pixeli coloane cu lățimi de la altă rezoluție, atunci toate acestea se traduce într-un procent, iar apoi imaginea de fundal care creează iluzia coloanei, este atribuit poziționarea unui procent, conform datelor calculate.

Recepția poate fi utilizat pentru două sau trei coloane, numai în cazul în care cele trei coloane trebuie să adăugați un alt sub-recipient în aspectul.

Un avantaj imens al acestei metode - este pur CSS. Cu toate acestea, este bine, atunci când marginile drepte ale containerelor utilizate în conceptul de design. Dar, din păcate, această tehnică nu poate fi aplicat la proiectarea, blocurile care sunt adaptate (rotunjite) colțuri.

În cazul utilizării colțuri rotunjite, nu am putut face fără a folosi JavaSript.

Există o mulțime de opțiuni de scripting pentru a rezolva problema de boxe înălțime. Am ales trei script-uri pe care le puteți utiliza în diferite soluții pentru diferite probleme.

L-am săpat în pubele www.dynamicdrive.com este utilizat pe scară largă ca o parte din aspectele de bază finite, care sunt prezentate pe site-ul ca un șablon.

Ea se aplică foarte simplu. Ai nevoie să copiați script «equalcolumns.js» directorul său script-uri sau directorul pe care îl utilizați pentru acest lucru pe site-ul tău. Și apoi prescrie link-ul de la script-ul în codul paginii între :

Pentru ca script-ul pentru a lucra în aspectul pe care doriți să modificați setările de bază în fișierul script aici:

ddequalcolumns.columnswatch = [ «leftcolumn», «rightcolumn», «contentwrapper»]

În consecință «leftcolumn», «rightcolumn», «contentwrapper» - pentru a schimba numele stilurilor.

Am testat-l personal, în cele din urmă a primit sprijinul deplin al rezultatului în FireFox 1.0 și mai mare, Opera versiunea 7 și Safari. Din păcate, IE6-7 a fost văzut foarte ciudat subsol bug trunchiere. Mai degrabă subsol prezent, dar nu poate fi stabilită în zona vizibilă a ferestrei browser-ului, a apărut întotdeauna defilare dimensiune + subsol. Cu toate acestea, l-am testat pe un singur model, aspectul, și este posibil ca atunci când un alt exemplu de realizare poziționarea acestei erori nu va containere. Încercați să faceți acest lucru pe etichetă.

1. PVII Egale Coloane Inaltime CSS - practic doar același nume din alte dezvoltatori și alte script-uri pentru a face acest lucru.

Principiul punerii în aplicare a script-ul standard, - între tag-uri codul se introduce un link către script-ul:

Cu toate acestea, pentru a script-ul la locul de muncă trebuie să etichetați Adăugați apelul criptei:

Cererea onload conține o selecție a includerii script (1 = da, 0 = nu) precum și o listă de variabile, gdec1 - un nume de clasă sau codul de identificare al containerului la care script-ul, P - este selectorul final, care este utilizat în acest container.

În exemplele de pe site-ul dezvoltatorilor toate bine de lucru. Cu toate acestea, în ceea ce privește modelul dinamic al destinației finale a selectorului atras nu este întotdeauna, selectorul final poate varia. Alternativ, introduceți selectorul direct în structura. Dar, în general, în ceea ce privește aspectul, care a fost testat primul scenariu, acesta nu funcționează. Din nou, am act de faptul că într-un script conventional static ar trebui să funcționeze - experiment.

Și, în sfârșit, al treilea mandat. Asta, pentru mine personal, părea cea mai atractivă și sa dovedit viabil în cadrul mărcii de încercare la 100%.

1. Script înălțimea maximă de selecție a containerului cu .class plus, ca argument al Djamil Legato și Andy Miller. Script-ul necesită pentru activitatea sa Mootools 1.11

Principiul aici este script-ul în sine:

var maxHeight = function (classname)

divs var = document.getElements ( 'div.' + classname);

max = Math.max (max, div.getSize () size.y.);

maxHeight.delay (500, maxHeight, 'sameheight');

„Sameheight“ - acesta este doar numele clasei care este folosit ca argument. Desigur, se poate numi orice doriți.

Legate de intrări: