Usando le proprietà float CSS, puoi spostare qualsiasi immagine alla destra di qualsiasi testo, come si può vedere con l'immagine alla destra di questo testo. Per fare ciò sulla tua pagina web segui i passaggi seguenti.

In questo esempio, utilizzeremo un file CSS esterno. Utilizzando un file CSS esterno, è possibile creare un'immagine mobile su qualsiasi pagina che include un collegamento al file CSS. I file CSS esterni semplificano anche la modifica delle impostazioni che potresti voler modificare in futuro.

1. Creare un file CSS. Se hai già un file CSS per la tua pagina web, modifica il tuo file CSS e aggiungi il seguente codice.

2. Aggiungi il seguente codice al file CSS.

 .floatRight {float: right; margin-left: 20px} 

Suggerimento: aggiungendo float: left renderebbe l'immagine mobile sul lato sinistro del testo.

Se vuoi avere più di un'immagine mobile sulla destra, aggiungi anche la seguente riga al file CSS.

 .floatRightClear {float: right; chiaro: right; margin-left: 20px} 

3. Dopo aver creato il codice precedente, salva il file CSS e chiamalo da ogni pagina HTML utilizzando il codice simile all'esempio seguente. Nel nostro esempio, abbiamo chiamato il file CSS style.css.

4. Infine, aggiungi l'immagine a qualsiasi immagine che desideri fluttuare sul lato destro del contenitore.