Opi kiertämään tekstiä kelluvan kuvan ympärille CSS: n avulla.
Käytä seuraavaa CSS-sääntöä saadaksesi tekstisi kiertämään oikeanpuoleisen kuvan ympärillä samalla tavalla kuin tämän artikkelin esittelykuvassa:
Float: left -sääntö siirtää kuvan vasemmalle marginaalille. Täyttö-oikea-sääntö estää tekstiä törmäämästä suoraan kuvan oikeaa reunaa vasten. Jos tähän kuvaan lisättäisiin reunus, kuvan ja reunuksen väliin tulisi täyte. Katso osa 2 käsitelläksesi reunuksella varustettua kuvaa.
Lisää seuraavaksi marginaalit kuvan vasemmalle ja oikealle puolelle sen keskittämiseksi. Oikea arvo vasemman ja oikean marginaalin keskittämiseksi on automaattinen.
Voit luoda paksun, kehysmäisen reunuksen urareunuksen tyylillä käyttämällä seuraavaa sääntöä:
Muut reunatyylit ovat kiinteät, pisteviivat, katkoviivat, kaksois-, harjanne-, sisä- ja aloitusviivat. Leveys voidaan ilmaista pikseleinä, emeinä tai prosentteina.
Reunuksia voidaan käyttää valikoivasti kuvan ylä-, oikea-, ala- ja vasemmassa reunassa. Voit käyttää tätä tietoa luomaan varjon kaltaisen vaikutelman.
Käyttämällä kiinteää reunaa kahdessa harmaan sävyssä vain oikealla ja alareunalla saat varjoefektin.
img { float: left; reuna-oikea-tyyli: kiinteä; reunus-oikea-leveys: 8px; reuna-oikea-väri: #CCCCCC; border-bottom-tyyli: kiinteä; reunus-ala-leveys: 8px; reuna-ala-väri: #999999; marginaali-oikea: 1em; marginaali-ala: 1em; }
Kärki
Jos sinulla on kuvia useammassa kuin yhdessä jaossa (div) sivulla, käytä jälkeläisten valitsimia niiden tyylin määrittämiseen yksitellen. Mahdolliset valitsimet: #content img, #sidebar img, #feature img.
