Naučite se, kako narediti besedilo zaviti okoli plavajoče slike s CSS.
Če želite, da se vaše besedilo zavije okoli slike na desni, podobno kot je na fotografiji, ki predstavlja ta članek, uporabite pravilo CSS, kot je to:
S pravilom float: levo se slika premakne na levi rob. Pravilo padding-right preprečuje, da bi besedilo udarilo tik ob desno stran slike. Če bi tej sliki dodali obrobo, bi prišlo med sliko in obrobo. Za delo s sliko z obrobo glejte razdelek 2.
Nato dodajte robove na levo in desno stran slike, da jo sredite. Ustrezna vrednost za levi in desni rob za centriranje česar koli je samodejno.
Če želite ustvariti debelo, okvirju podobno obrobo s slogom obrobe utora, lahko uporabite pravilo, kot je to:
Drugi slogi obrobe so trdni, pikčasti, črtkani, dvojni, grebenski, vstavljeni in začetni. Širina je lahko izražena v slikovnih pikah, ems ali odstotkih.
Obrobe je mogoče uporabiti selektivno na zgornji, desni, spodnji in levi strani slike. To znanje lahko uporabite za ustvarjanje učinka, kot je senca.
Z uporabo trdne obrobe v 2 odtenkih sive le na desni in spodnji meji dobite učinek sence.
img { float: levo; obroba desno-style: trdna; obroba-desna širina: 8px; border-right-color: #CCCCCC; obroba-spodnji slog: trdna; obroba-spodnja-širina: 8px; border-bottom-color: #999999; rob-desno: 1em; rob-dno: 1em; }
Nasvet
Če imate slike v več kot enem oddelku (div) strani, uporabite izbirnike potomcev, da jih oblikujete posamezno. Možni izbirniki: #content img, #sidebar img, #feature img.
