Ismerje meg, hogyan lehet szöveget körbefonni egy lebegő kép körül CSS-sel.
Ha azt szeretné, hogy a szöveg a jobb oldali kép köré kerüljön, hasonlóan a cikket bemutató fotóhoz, használjon egy ehhez hasonló CSS-szabályt:
A float: left szabály a képet a bal margóra mozgatja. A jobb oldali kitöltés szabály megakadályozza, hogy a szöveg közvetlenül a kép jobb oldalához csapódjon. Ha szegélyt adnak ehhez a képhez, akkor a kép és a szegély közé párnázás kerülne. A szegélyes kép kezeléséhez lásd a 2. részt.
Ezután adjon hozzá margókat a kép bal és jobb oldalához, hogy középre helyezze azt. A bal és jobb margók megfelelő értéke bárminek középre állításához az automatikus.
Vastag, keretszerű szegély létrehozásához a barázdaszegély stílus használatával egy ehhez hasonló szabály használható:
A többi szegélystílus a következő: tömör, pontozott, szaggatott, dupla, gerinc, betét és kiinduló. A szélesség pixelben, em-ben vagy százalékban fejezhető ki.
A szegélyek szelektíven alkalmazhatók a kép felső, jobb, alsó és bal oldalán. Ezt a tudást felhasználhatja egy árnyékhoz hasonló hatás létrehozására.
Ha a szürke 2 árnyalatú tömör szegélyét csak a jobb és az alsó szegélyen használja, vetett árnyékhatást kap.
img { float: left; border-right-style: tömör; szegély jobb oldali szélesség: 8 képpont; szegély-jobb-szín: #CCCCCC; border-bottom-style: tömör; keret-alsó szélesség: 8 képpont; keret-alsó szín: #999999; margó-jobb: 1em; margó-alsó: 1em; }
Tipp
Ha egy oldalon több felosztásban (div) is vannak képei, a leszármazott választókkal egyedileg alakíthatja ki őket. Lehetséges kiválasztók: #content img, #sidebar img, #feature img.
