Hvordan Juster Pictures Tre siden av hverandre i HTML
Når du legger til bilder til ditt nettsted, har de ikke alltid justere hvor du vil. De kan hoppe til en annen linje, eller ved siden av teksten. Jo flere bilder du har på en enkelt linje, jo mindre plass du har. Det er best å sjekke oppsettet i nettleseren selv om det ser fint i din Webredaktør. Du kan flyte bilder ved siden av hverandre ved styling HTML. Den "float: left" egenskapen kan du flytte elementer mot venstre side av en webside.
Bruksanvisning
1 Start en tekstredigeringsprogram, for eksempel Notisblokk, TextPad eller WordPad. Velg "File" og "Open" fra menyen. Finn og dobbeltklikk på HTML-filen du ønsker å endre.
2 Legg til følgende kode mellom <HEAD> -kode. Den nåværende koden gir hvert bilde en 33% bredde. Hvis du vil endre bredden, endre "33%" til en annen verdi, for eksempel dimensjonene på bildet. Koden "Padding-right: 5px;" tilfører en fem bildeelement mellomrom til høyre for hvert bilde. Hvis du vil bruke en annen avstand, endring "5px;" til et annet nummer. For å legge til padding til venstre på bildet, endre "padding-right" til "padding-left."
<Style type = "text / css">
<! -
img.left {float: left;
padding-right: 5px;
width: 33%;
}
img.middle {float: left;
padding-right: 5px;
width: 33%;
}
img.right {float: left;
padding-right: 5px;
width: 33%;
}
->
</ Style>
3 Legg til følgende kode mellom <BODY> tag der du vil de tre bildene å gå. Erstatt "leftimage.gif", "middleimage.gif" og "rightimage.gif" med navnene på bildene dine.
<Div>
<Img src = "leftimage.gif" class = "left" alt = "image description" />
<Img src = "middleimage.gif" class = "middle" alt = "image description" />
<Img src = "rightimage.gif" class = "right" alt = "image description" />
</ Div>