Tutorial CSS - Float

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Float

Mesaj de DarkArms » Mie Dec 07, 2016 2:09 pm

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: Selectaţi tot

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: Selectaţi tot

.enter { clear:both; }

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator