HTML: Hvordan Bryt tekst rundt et bilde

HTML: Hvordan Bryt tekst rundt et bilde


Siden HTML 4.01, er Cascading Style Sheet (CSS) koden som brukes for å definere en bildekode innretting. Webdesignere bruke "flyte" regel i CSS for å justere noen HTML-element - tekst, bilder og annet innhold - til høyre eller venstre for en side. Enhver tilstøtende element på siden vil vikle rundt fløt element. I dette tilfellet, tekst brytes rundt en fløt bilde. Bruk mer CSS-kode for å definere et bilde marginer, grenser og andre formateringsvalg.

Bruksanvisning

1 Åpne HTML-fil i en ren tekst eller kode redigering program og finne den teksten du ønsker å vikle rundt bildet. Bildet kode bør gå over teksten, og ikke plassere bildet koden mellom eventuelle tekst koder. Plasser følgende kode for å legge til et bilde:

<Img class = "innpakket" />

Endre "your-image.gif" til web-adressen til bildet. Bruk bare filens navn hvis filen finnes i samme mappe som HTML-fil som du legger bildet. Change "pakket" til hva klassenavnet du vil; ansatte foretrekker å bruke meningsfulle navn.

2 Rediger HTML-fil CSS-kode for å justere bildet. Hvis websiden din bruker en koblet CSS-fil, åpne denne filen og legge til koden der. Hvis nettsiden bruker <style> og </ style> tags, og deretter legge den nødvendige koden mellom disse kodene. Legg til <style> og </ style> mellom <head> og </ head> -taggen er av HTML-filen hvis den ikke koble til en CSS-fil og har ennå ikke inneholde <style> koder. Koden for å flyte et bilde er som følger:

img.wrapped {float: left;}

Change "venstre" til "riktig" hvis du ønsker å justere bildet til høyre. Change "pakket" til klassen du stiller i <img> -taggen.

3 Legg marginer og annen formatering til bildet ved å legge mer stil regler til din CSS-kode. Marginene legge område rundt bildet, og vil holde den fra å komme borti den innpakket teksten. Følgende er noen eksempel kode:

img.wrapped {

float: left;

margin: 5px;

border: 1px solid black;

}

Endre nummeret etter "margin" for å justere størrelsen på marginen i denne koden. De her er definert av piksler marginer; Dette bildet har en fem-pixel margin på alle sider.

Hint

  • Unngå bruk av HTML justerings attributter. Tekst brytes ikke rundt koder som bruker disse attributtene, eller det gjør det på uforutsigbare måter.