Come affiancare perfettamente due o più immagini

Codice:
<div style="display:inline-block; padding:10px; vertical-align:bottom">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block; padding:10px; vertical-align:bottom">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block; padding:10px; vertical-align:bottom">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>

Esempio:
esempio
esempio
esempio

Il valore dato alla voce "padding" serve a distanziare le immagini tra loro e dai margini.
Il parametro  "vertical-align:bottom" serve stabilire la linea di allineamento delle immagini.
La scelta è tra:
  • middle: le immagini sono affiancate seguendo la loro linea centrale.
  • bottom: le immagini sono affiancate seguendo la loro linea di base (default).
  • top: le immagini sono allineate seguendo la loro linea superiore.
Per centrare il blocco delle immagini, è possibile racchiudere il tutto in un ulteriore div con questo comando: <div style="text-align:center" >

Nella visualizzazione su dispositivi mobili, le immagini affiancate con questo metodo si sposteranno, a seconda della larghezza dello schermo, sistemandosi in seconda fila se necessario. Se volete che rimangano sulla stessa linea, riducendo le loro dimensioni, potete ricorrere al metodo delle tabelle:

Esempio:
<table style=" width:100%; max-width:600px; margin:0 auto; border-collapse: separate; border-spacing: 2px; border: 0;">
<tbody>
<tr>
<td>
<img style="width:100%" src="URL immagine">
</td>
<td>
<img style="width:100%" src="URL immagine">
</td>
<td>
<img style="width:100%" src="URL immagine">
</td>
</tr>
</tbody>
</table>

I valori di questa tabella sono impostati per una larghezza massima di 600px che potete cambiare secondo le vostre esigenze.
Per aggungere altre immagini, sulla stessa riga, ripetete la stringa:
<td>
<img style="width:100%" src="URL immagine">
</td>

Per aggiungere un'altra fila di immagini sotto a quella già presente, ripetete tutto il blocco:

<tr>
<td>
<img style="width:100%" src="URL immagine">
</td>
<td>
<img style="width:100%"src="URL immagine">
</td>
<td>
<img style="width:100%" src="URL immagine">
</td>
</tr>







Fammi sapere se questo argomento ti è stato utile.
Se non ti è stato utile, potrai inviare le tue osservazioni. Grazie
Ti è stato utile questo argomento?
Si
No

Continua con:
E molto altro ancora se leggi:
Tutti gli argomenti