Sådan flyttes tekst rundt om et billede med HTML eller CSS

Når du inkluderer et billede med teksten på din webside, viser standardformatet grafikken over eller under det omgivende indhold og efterlader hvidt mellemrum til venstre og højre for billedet. Dette spilder plads og får billedet til at se adskilt 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 rundt om billedets kanter. Brug HTML eller CSS til at flytte tekst rundt på dine billeder, som du foretrækker.

HTML

Trin 1

Start sidefilen i din computers teksteditorprogram, og placer din markør inde i ""tag. Skriv" align = "og følg dette med anførselstegn som sådan:

Trin 2

Indtast "højre", "venstre", "midt", "top" eller "nederst" efter justeringsposten for at angive, hvor dit billede vises i forhold til din tekst. En "top" -justering får dit indhold til at vises på det højeste punkt i dit billede, "midten" flytter teksten til midten af ​​billedet, og "bunden" leder indholdet til at starte i bunden af ​​grafikken. Derudover flytter en "højre" position dine data til venstre for billedet, og en "venstre" justering placerer indhold til højre for billedet. Indtast din kode som følger:

Gem filen.

CSS

Trin 1

Placer din markør inde i ""tag og skriv" style = "med et sæt anførselstegn foran den sidste vinkelbeslag. For at illustrere:

Trin 2

Indtast "float:" inden for anførselstegn, og skriv attributten "left" eller "right" for at navngive grafikens justering. Værdien "venstre" får dit billede til at vises til venstre og flytter din tekst til højre, mens attributten "højre" gør det modsatte. For eksempel:

Gem dit dokument.