Ca marcare vom folosi liste. În fiecare element li vom plasa o imagine a mărfurilor și descrierea lor. Fotografiile sunt intenționat luate în diferite dimensiuni. De regulă, atunci când site-ul este umplut, administratorul rar se gândește la ce imagini ar trebui să fie optimizate și le încarcă pe site ca atare. Sarcina noastră va fi aceea de a centra imaginile și de a face toate blocurile de aceeași înălțime.
Să adăugăm stiluri de înregistrare. Nu voi elabora în detaliu aici, după cum se spune, toată lumea este liberă să aplice ceea ce consideră necesar.
Acum mergeți la pagină și vedeți ce sa întâmplat. Dacă imaginea este mai mult sau mai puțin decentă, atunci cu blocurile în sine, imaginea este inofensivă. Să scriem un script mic care va rezolva cu ușurință această problemă.
Salvăm, reîncărcați pagina și admirați lucrările efectuate. Toate blocurile au avut aceeași înălțime.
Acum, mai multe detalii despre ceea ce am scris aici. Declamați variabila maxH și atribuiți-o o valoare 0. Apoi, selectați toate elementele li din director și buclă prin ele în buclă folosind fiecare funcție. În corpul bucla, declarăm o altă variabilă h_block în care stocăm valoarea înălțimii fiecărui element li. rotunjite la un număr întreg folosind funcția parseInt. Tot în același ciclu, setăm condiția - dacă valoarea blocului curent este mai mare decât valoarea din variabila maxH. atunci îi atribuim această valoare celor din urmă. Cu alte cuvinte - verificăm înălțimea fiecărui bloc și păstrăm înălțimea maximă în variabila maxH. Și, în cele din urmă, trecând prin toate li și calculând cea mai înaltă înălțime, îl atribuim tuturor blocurilor (linia $ ("li"). Înălțimea (maxH);).
Cu toate acestea, această metodă are un dezavantaj. Să presupunem că într-un bloc administratorul a adăugat prea mult text. Aplicând metoda descrisă mai sus, aliniem toate blocurile la cea mai înaltă și obțineți mult spațiu liber de jos în celelalte.
Pentru a corecta o astfel de situație este absolut imposibilă (cu excepția cazului în care reduceți cantitatea de text din fața problematică), dar este foarte posibil să reduceți deficitul la un nivel minim.
Rescrie scriptul. Pentru prima dată, va alinia blocurile la cele mai înalte, dar va deveni un pic mai deștept. Îl vom învăța să contorizeze numărul de litri în fiecare rând și să le alinieze la cel mai înalt rând și nu la cea mai înaltă a paginii.
Asta e tot. Care dintre metodele de aplicat, este necesar să se decidă asupra situației, dar în orice caz - a doua metodă este mai universală.