Proprietatea float in css.
Float se foloseste in geeral pentru crearea de template-uri si pentru galerii de imagini, dar are mult mai multe intrebuintari.
Folosind atributul float elementele vor pluti unul langa altul sau unul in continuarea celuilalt atat cat spatiul rezervat lor o permite. Acesttip de aliniere se refera la o alinire orizontala si nu verticala a elementelor.
Sa luam un exemplu practic. Vrem sa facem o galerie de imagini (thumbs) si vrem ca imaginile in miniatura sa fie afisate una langa cealalta in linii si coloane. float:left; va afisa thumb-urile una langa cealalta pe o linie atat cat latimea paginii permite, sarind pe linia urmatoare atunci cand urmatoarea imagine nu incape.
Un alt exemplu. Vrem sa afisam o imafine aliniata la dreapta sau la stanga si vrem ca aceasta sa fie inconjurata de text. float:left; sau float:right; va afisa textul in stanga sau in dreapta imaginii depinde de cum a fost aliniata anterior:
Cod:
img {
float:left;
}
sau
.clasa_de_elemente {
float:left;
}
CSS - Ruperea randului - Atributul clear
Toate elemenetele html care sunt situate dupa alementul aliniat cu float right sau left vor pluti langa acesta. Pentru a impiedica sa se intample acest lucru atunci cand nu vrem sa se intample vom folosi atibutul clear cu valoarea both:
Cod:
.enter {
clear:both;
Float se foloseste in geeral pentru crearea de template-uri si pentru galerii de imagini, dar are mult mai multe intrebuintari.
Folosind atributul float elementele vor pluti unul langa altul sau unul in continuarea celuilalt atat cat spatiul rezervat lor o permite. Acesttip de aliniere se refera la o alinire orizontala si nu verticala a elementelor.
Sa luam un exemplu practic. Vrem sa facem o galerie de imagini (thumbs) si vrem ca imaginile in miniatura sa fie afisate una langa cealalta in linii si coloane. float:left; va afisa thumb-urile una langa cealalta pe o linie atat cat latimea paginii permite, sarind pe linia urmatoare atunci cand urmatoarea imagine nu incape.
Un alt exemplu. Vrem sa afisam o imafine aliniata la dreapta sau la stanga si vrem ca aceasta sa fie inconjurata de text. float:left; sau float:right; va afisa textul in stanga sau in dreapta imaginii depinde de cum a fost aliniata anterior:
Cod:
img {
float:left;
}
sau
.clasa_de_elemente {
float:left;
}
CSS - Ruperea randului - Atributul clear
Toate elemenetele html care sunt situate dupa alementul aliniat cu float right sau left vor pluti langa acesta. Pentru a impiedica sa se intample acest lucru atunci cand nu vrem sa se intample vom folosi atibutul clear cu valoarea both:
Cod:
.enter {
clear:both;
