Hvordan flytte tekst rundt et bilde med HTML eller CSS

Når du tar med et bilde med teksten på websiden din, viser standardstilen grafikken over eller under omkringliggende innhold, og etterlater hvitt mellomrom til venstre og høyre for bildet. Dette kaster bort plass og får bildet til å se usammenhengende fra teksten din. For å fikse dette har du muligheten til å bruke enten HyperText Markup Language (HTML) eller Cascading Style Sheets (CSS) for å spesifisere plassering av bildet slik at teksten brytes rundt bildene. Bruk HTML eller CSS til å flytte tekst rundt bildene dine, som du foretrekker.

HTML

Trinn 1

Start sidefilen i datamaskinens teksteditorprogram og plasser markøren inne i ""tag. Skriv" align = "og følg dette med anførselstegn slik:

Steg 2

Skriv inn "høyre", "venstre", "midt", "topp" eller "nederst" etter justeringsoppføringen for å spesifisere hvor bildet ditt vises i forhold til teksten din. En "topp" -justering gjør at innholdet ditt vises på det høyeste punktet i bildet ditt, "midten" flytter teksten til midten av bildet, og "bunnen" leder innholdet til å starte nederst i grafikken. I tillegg, en "høyre" posisjon, flytter dataene dine til venstre for bildet, og en "venstre" justering plasserer innhold til høyre for bildet. Skriv inn koden din som følger:

Lagre filen.

CSS

Trinn 1

Plasser markøren inne i ""tag and type" style = "med et sett med anførselstegn før den siste vinkelfestet. For å illustrere:

Steg 2

Skriv inn "float:" i anførselstegnene, og skriv inn "left" eller "right" -attributtet for å gi navnet på grafikken. "Venstre" -verdien får bildet til å vises til venstre og flytter teksten til høyre, mens "høyre" -attributtet gjør det motsatte. For eksempel:

Lagre dokumentet.