August 3
Quando si aggiungono immagini per il tuo sito web, non sempre si allineano in cui si desidera. Possono passare a un'altra linea, o accanto il testo. Le altre immagini si dispone su una singola linea, meno spazio che avete. E 'meglio controllare il layout nel browser, anche se si guarda bene nel vostro editor web. Si può galleggiare immagini accanto all'altra per lo styling codice HTML. Il "float: left" proprietà consente di spostare gli elementi verso il lato sinistro di una pagina Web.
1 Avviare un editor di testo, come Blocco note, TextPad o WordPad. Selezionare "File" e "Apri" dal menu. Trova e fare doppio clic sul file HTML che si desidera modificare.
2 Aggiungere il seguente codice tra i tag <head> della pagina. Il codice corrente dà ogni immagine una larghezza 33%. Per modificare la larghezza, cambiare "33%" ad un valore diverso, come ad esempio le dimensioni dell'immagine. Il codice, "padding-right: 5px;" aggiunge una spaziatura cinque pixel a destra di ciascuna immagine. Per usare una spaziatura diversa, il cambiamento "5px;" un numero diverso. Per aggiungere padding a sinistra dell'immagine, il cambiamento "padding-right" a "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 Aggiungere il codice seguente tra i tag <body> in cui si desidera che le tre immagini di andare. Sostituire "leftimage.gif", "middleimage.gif" e "rightimage.gif" con i nomi delle immagini.
<Div>
<Img src = "leftimage.gif" class = alt = "image description" "sinistra" />
<Img src = class = alt = "image description" "middle" "middleimage.gif" />
<Img src = "rightimage.gif" class = alt = "image description" "destra" />
</ Div>