Aflați cum să înfășurați textul în jurul unei imagini plutitoare cu CSS.
Pentru ca textul să se înfășoare în jurul imaginii din dreapta, similar modului în care este în fotografia care prezintă acest articol, utilizați o regulă CSS ca aceasta:
Regula float: stânga face ca imaginea să se miște la marginea din stânga. Regula de umplutură la dreapta împiedică textul să se lovească chiar de partea dreaptă a imaginii. Dacă s-a adăugat o chenar la această imagine, umplutura s-ar afla între imagine și chenar. Consultați Secțiunea 2 pentru a lucra cu o imagine cu chenar.
Apoi, adăugați margini la stânga și la dreapta imaginii pentru a o centra. Valoarea potrivită pentru marginile din stânga și din dreapta pentru a centra orice este automată.
Pentru a crea un chenar gros, asemănător unui cadru, utilizând stilul de margine canelată, se poate folosi o regulă ca aceasta:
Alte stiluri de chenar sunt solide, punctate, punctate, duble, creastă, inset și start. Lățimea poate fi exprimată în pixeli, ems sau procente.
Marginile pot fi aplicate selectiv în partea de sus, dreapta, jos și stânga imaginii. Puteți folosi aceste cunoștințe pentru a crea un efect ca o umbră.
Folosind un chenar solid în 2 nuanțe de gri pe marginea dreaptă și inferioară, obțineți un efect de umbră.
img { float: left; border-right-style: solid; chenar-dreapta-lățime: 8px; chenar-dreapta-culoare: #CCCCCC; border-bottom-style: solid; chenar-jos-lățime: 8px; culoarea chenarului de jos: #999999; margine-dreapta: 1em; margine-jos: 1em; }
Bacsis
Dacă aveți imagini în mai multe diviziuni (div) ale unei pagini, utilizați selectori descendenți pentru a le stila individual. Selectori posibili: #content img, #sidebar img, #feature img.
