Miten liikkua teksti kuvan ympärille HTML tai CSS

Siirrä teksti kuvan ympärille HTML tai CSS Thinkstock / Comstock / Getty Images

Kun lisäät kuvan tekstiä Web-sivulla, oletustyyliä näyttää graafisen ylä- tai alapuolella ympäröivän sisällön, jättäen valkoista tilaa vasemmalle ja oikeallekuva.Tämä jätteet tilaa ja tekee kuvasta näyttävät hajanaiseen päässä tekstin.Voit korjata tämän, sinulla on mahdollisuus käyttää joko HyperText Markup Language (HTML) tai CSS (CSS) määrittää sijainti kuvan niin että teksti kiertyy rajojen kuva.Käytä HTML tai CSS siirtää tekstin ympärillä kuvia, kuten haluat.

HTML

  1. Launch sivun tiedosto tietokoneesi teksti- ja sijoita kohdistin sisällä "& lt; img & gt;"tag.Kirjoita "align =" ja seurata tätä lainausmerkkeihin kuten niin:

    & lt; img src = "image.jpg" align = "" / & gt;

  2. Enter "oikea", "vasen", "keski", "top" tai "alhaalta" jälkeen align merkintä määrittää missä kuva näkyy suhteessa tekstin."Top" yhdenmukaistaminen tekee sisältöä näkyvät korkein kohta kuvasi, "keskellä" siirtää tekstin keskellä kuvaa ja "alhaalta" ohjaa sisält

    ö alkaa alareunassa graafisen.Lisäksi, "oikea" asennossa, siirtää tietosi vasemmalla kuvan ja "vasen" yhdenmukaistaminen paikkoja sisältöä oikealle kuvan.Kirjoita koodi seuraavasti:

    & lt; img src = "image.jpg" align = "top" / & gt;

  3. Tallenna tiedosto.

CSS

  1. Aseta kohdistin sisällä "& lt; img & gt;"tag ja tyyppi "style =" joukko lainausmerkit ennen viimeistä kulmasulkeen.Asian havainnollistamiseksi:

    & lt; img src = "image.jpg" style = "" / & gt;

  2. Enter "float:" lainausmerkkien sisällä ja kirjoita "vasen" tai "oikea" ominaisuus nimetä yhdenmukaistaminen graafisen."Left" arvo tekee kuva näkyy vasemmalla ja siirtyy tekstin oikealle, kun "oikea" ominaisuus ei päinvastoin.Esimerkiksi:

    & lt; img src = "image.jpg" style = "float: right" / & gt;

  3. Tallenna asiakirja.

Resurssit

  • HTML-koodin Tutorial: HTML-Kohdista
  • Quackit: CSS-Float
  • World Wide Web Consortium (W3C): käynnistysHTML + CSS
910
0
1
Html