Naučite kako napraviti premotavanje teksta oko plutajuće slike pomoću CSS-a.
Da bi se vaš tekst omotao oko slike s desne strane, slično kao na fotografiji koja predstavlja ovaj članak, upotrijebite CSS pravilo poput ovog:
Pravilo float: lijevo pomiče sliku na lijevu marginu. Pravilo padding-right sprječava da se tekst udari točno o desnu stranu slike. Ako je ovoj slici dodan obrub, između slike i obruba doći će dopuna. Pogledajte odjeljak 2 za rad sa slikom s obrubom.
Zatim dodajte margine lijevo i desno od slike kako biste je centrirali. Ispravna vrijednost za lijevu i desnu marginu za centriranje bilo čega je automatski.
Da biste stvorili debeli obrub nalik okviru koristeći stil obruba utora, može se koristiti pravilo poput ovog:
Ostali stilovi obruba su čvrsti, točkasti, isprekidani, dvostruki, sljemeni, umetnuti i na početku. Širina se može izraziti u pikselima, ems ili postocima.
Obrube se mogu selektivno primijeniti na gornji, desni, donji i lijevu stranu slike. Ovo znanje možete koristiti za stvaranje efekta poput sjene.
Koristeći čvrst obrub u 2 nijanse sive samo na desnom i donjem rubu, dobivate efekt sjene.
img { float: lijevo; obrub-desno-stil: čvrst; granica-desna-širina: 8px; border-right-color: #CCCCCC; obrub-dno-stil: čvrst; obrub-dno-širina: 8px; border-bottom-color: #999999; margin-desno: 1em; margina-dno: 1em; }
Savjet
Ako imate slike u više od jednog odjeljka (div) stranice, upotrijebite selektore potomaka da ih stilizirate pojedinačno. Mogući selektori: #content img, #sidebar img, #feature img.
