Sådan Flyt tekst omkring et billede med HTML eller CSS

Flyt tekst omkring et billede med HTML eller CSS Thinkstock / Comstock / Getty Images

Når du inkluderer et billede med teksten på din webside, viser standard stil grafikken over eller under omgivende indhold, efterlader hvide plads til venstre og højre forbilledet.Dette affald plads og gør billedet synes usammenhængende fra din tekst.For at løse dette, har du mulighed for at bruge enten HyperText Markup Language (HTML) eller Cascading Style Sheets (CSS) til at angive placeringen af ​​billedet, så teksten ombrydes omkring grænser billedet.Bruge HTML eller CSS til at flytte tekst omkring dine billeder, som du foretrækker.

HTML

  1. Start side-filen i computerens teksteditor program, og placere markøren inde i "& lt; img & gt;"tag.Skriv "align =", og følg dette med anførselstegn som så:

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

  2. Indtast "højre", "venstre", "middle", "top" eller "bunden" efter align post at angive, hvor billedet vises i forhold til din tekst.En "top" justering gør dit indhold vises på det højes

    te punkt af dit billede, den "midterste" flytter teksten til midten af ​​billedet og "bunden" dirigerer indholdet til at starte i bunden af ​​grafikken.Derudover en position "højre", bevæger dine data til venstre i billedet og en "venstre" alignment steder indhold til højre i billedet.Skriv din kode som følger:

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

  3. Gem filen.

CSS

  1. Placer markøren inde i "& lt; img & gt;"tag og skriv "style =" med et sæt anførselstegn før den sidste vinkel beslag.For at illustrere:

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

  2. Enter "float:" inde i anførselstegn og skriv "venstre" eller "højre" attribut til at navngive tilpasningen af ​​grafikken.Den "venstre" værdi gør dit billede vises på venstre og flytter din tekst til højre, mens den "rigtige" attribut gør det modsatte.For eksempel:

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

  3. Gem dit dokument.

Ressourcer

  • HTML Kode Tutorial: HTML Juster
  • Quackit: CSS Float
  • World Wide Web Consortium (W3C): Framed HTML + CSS
138
0
1
Html