Nwlapcug.com


Come inserire due immagini in orizzontale con HTML



In HTML, è necessario incorporare le immagini utilizzando il tag < img > e quindi stile usando codice Cascading Style Sheet (CSS). È possibile allineare immagini in una riga orizzontale di "galleggiante" loro, ma è necessario tenere immagini fatto galleggiare da rompere i layout di pagina Web. Aggiunta di un tag < div > attorno alle immagini aiuta a tenerli al loro posto. Dopo aver allineato le immagini, è possibile utilizzare CSS per aggiungere spaziatura e altri stili per le immagini. Questa tecnica è utile per la creazione di pagine Galleria di immagine.

Istruzioni

1

Aggiungere un tag < img > per ogni immagine nel documento HTML. Posizionare ogni tag < img > sulla propria riga ma ancora adiacente agli altri. Utilizzare l'attributo "src" per definire il percorso del file..--l'indirizzo Web..--ad ogni immagine, in questo modo:

< img src="path/to/image1.png" >
< img src="path/to/image2.png" >

2

Salvare il file HTML e archiviarlo nel browser. Se il tuo sito è già in diretta su un server Web, ricordarsi di caricare sia il file HTML aggiornato più entrambe le immagini. Entrambe le immagini deve essere già allineati by-side. Ciò accade perché, anche se si mette ogni tag < img > sulla propria riga, fatto non avvolgere nei tag < p > per creare paragrafi o aggiungere un
Tag per le linee di interruzione. A volte il codice CSS causerà le immagini non vengano visualizzati side-by-side, però. Si dovrà anche CSS nello spazio le immagini.

3

Modificare il CSS della pagina Web per assicurarsi che le immagini sempre allineare orizzontalmente. Aggiungere il codice CSS in un file CSS esterno o tra tag < style >, che vanno tra i tag < head > nella parte superiore del documento HTML. Ecco il codice di esempio:

IMG {galleggiante: sinistra; margin-right: 10px; margin-bottom: 10px;}

Il codice sopra riportato "galleggia" ogni istanza del tag < img > a sinistra del tutto ciò che è adiacente alla pagina. Nulla a destra di un tag di sinistra-ha galleggiato avvolge l'elemento fatto galleggiare. Aggiungere imbottitura o margini di spazio le immagini.

4

Avvolgere i tag < img > con un tag < div > e dare il tag < div > un attributo ID. Nome dell'attributo ID qualcosa di unico e significativo. Ecco un esempio:

< div id = "immagini" >
< img src="path/to/image1.png" / >
< img src="path/to/image2.png" / >
< / div >

5

Scrivere il seguente codice CSS per mantenere le immagini fatto galleggiare da "galla" in altre contenuto:

immagini {clear: entrambi;}

È anche possibile modificare il codice CSS float solo immagini trovate tra i tag < div > con un ID di "immagini" in questo modo:

Immagini img {float: left;}

Consigli & Avvertenze

  • Scopri il modello di riquadro CSS per comprendere meglio come posizionare immagini, testo e altro ancora sulle tue pagine Web. Il modello box descrive come i bordi delle immagini HTML e dimensioni vengono calcolati dai browser.
  • Sempre eseguire il backup i file HTML e CSS durante la modifica di pagine Web.