Se sei interessato a imparare come far fluttuare un'immagine a destra del testo, è un compito abbastanza semplice. Ci sono molte situazioni in cui i programmatori vogliono che un'immagine su una pagina Web appaia all'interno del testo con il testo che scorre o avvolto attorno ad essa. Manipolare le immagini è simile alla manipolazione del testo, quindi se hai esperienza con quest'ultimo, questo processo non dovrebbe essere affatto difficile.
Infatti, con la proprietà float CSS, è facile far fluttuare la tua immagine a destra del testo e far scorrere il testo attorno ad essa sul lato sinistro. Usa questo tutorial di cinque minuti per imparare come.
Impostazione di un layout con Float
Questo layout di base creerà uno spazio per il tuo testo e farà galleggiare un'immagine a destra di quel testo. Certamente, questi layout possono diventare più complicati, ma questo esempio ti mostrerà il principio di base dietro il lavoro con float e text.
Supponendo che tu abbia già un documento HTML con cui stai lavorando e un foglio di stile CSS separato, inizia creando un nuovo div che funga da riga contenente il tuo elemento flottato.
Assegna a quel nuovo div due classi, container e clearfix. Ci sono molti modi per gestirlo e i nomi sono interamente a tua scelta, ma questi ti aiuteranno a rimanere organizzato e a stabilire il tuo layout.
-
Nel tuo CSS, definisci come vuoi che il tuo contenitore si adatti al tuo layout generale. Questo esempio lo renderà una riga a tutta larghezza.
.contenitore {
larghezza: 100%;
altezza: 25rem;
} -
Quindi, prenditi cura della classe clearfix. Il clearfix è necessario perché float può creare alcuni strani problemi nel layout. La definizione della proprietà "overflow" nel clearfix impedisce agli elementi flottati di uscire dal loro spazio designato.
.clearfix {
trabocco: automatico;
} -
Ora puoi creare un elemento all'interno del div del contenitore e spostarlo a destra. Se stai avvolgendo il testo attorno a un'immagine, questa sarebbe la tua immagine. Crea l'elemento e assegnagli una classe per la proprietà float.
-
Crea la classe per il tuo galleggiante. Probabilmente vorrai aggiungere anche un po' di stile, se creerai elementi più identici. Altrimenti, puoi applicare una classe separata per il tuo stile.
.float-right {
galleggiante: a destra;
larghezza: 300px;
altezza: 200px;
colore di fondo: rosso;
margine: 0 0 0,5 rem 0,5 rem
} -
Se stai cercando di avvolgere il testo attorno a quell'elemento flottante, inserisci il tuo testo ora. Mettilo ovunque nel contenitore, prima o dopo l'elemento float.
un po' di testo
Più testo
...e così via.
-
Aggiorna la tua pagina e controlla il risultato.
Avvolgendo
E questo lo fa. Ora vedi che spostare un'immagine a destra non è affatto difficile. Potresti anche essere interessato a far fluttuare un'immagine a sinistra e a spostarla al centro. Sebbene la prima mossa sia possibile, sfortunatamente, non puoi spostare un'immagine al centro, poiché ciò richiederebbe in genere un layout a due colonne.