Kuidas liikuda teksti ümber kujutise HTML või CSS

Liiguta teksti ümber kujutise HTML või CSS Thinkstock / Comstocki / Getty Images

Kui lisate pildi, mille teksti oma veebilehele, vaikimisi stiili kuvab graafilise kõrgemal või madalamal ümbritseva sisu, jättes tühja ruumi vasakule ja paremalepilt.See raiskab ruumi ja viib pildi lahutada oma teksti.Selle parandamiseks on teil võimalus kasutada kas HyperText Markup Language (HTML) või Kaskaadlaadistik (CSS) täpsustada positsioneerimine pildi nii, et tekst murtakse piire pilt.Kasutage HTML või CSS liikuda teksti ümber oma pilte, kui soovite.

HTML

  1. Launch lehe fail oma arvuti tekstiredaktor programmi ja vii kursor sees "& lt; img & gt;"tag.Tüüp "align =" ja järgige seda jutumärkidesse nii:

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

  2. Enter "õige", "vasakule", "keskel", "top" või "alt" pärast align kirje täpsustada, kus oma pilt tundub seoses oma teksti."Ülevalt" viimine muudab oma sisu ilmuvad kõrgeimas punktis pildi, "middle" liigutab teksti keskele foto ja "alt" suunab sisu alustada allosas graafika.L

    isaks "õige" asendi, liigub oma andmeid vasakul pilt ja "vasakule" viimine kohti sisu õige pildi.Sisestage oma koodi järgmiselt:

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

  3. Salvesta fail.

CSS

  1. asetage kursor sees "& lt; img & gt;"tag ja tüüp "style =" komplekt jutumärke enne viimast nurksulu.Et illustreerida:

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

  2. Enter "float:" sees jutumärkides ja kirjuta "vasakule" või "paremale" atribuudi nime viimist graafika."Vasakule" väärtus muudab oma pilt ilmub vasakule ja liigub oma teksti paremale, samal ajal kui "õige" atribuut ei vastand.Näiteks:

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

  3. Salvesta dokument.

Resources

  • HTML kood Juhendaja: HTML Align
  • Quackit: CSS Float
  • World Wide Web Consortium (W3C): AlatesHTML + CSS
886
0
1
Html