Hai bisogno del codice per avvolgere il testo attorno a un'immagine? Normalmente quando si crea una pagina HTML, tutto scorre linearmente, ovvero un blocco subito dopo l'altro. Tutti i miei post precedenti sono un esempio di questo, cioè testo, immagine, testo ecc.
A volte potresti voler includere del testo accanto a un'immagine anziché al di sotto di essa. Questo è chiamato avvolgere il testo intorno all'immagine. In realtà è abbastanza semplice avvolgere il testo usando HTML. Si noti che non è necessario utilizzare i CSS per avvolgere il testo.
Tuttavia, in questi giorni il W3C raccomanda l'uso di CSS anziché HTML per questi tipi di attività. Menzionerò entrambi i metodi di seguito, ma se è possibile, è meglio usare i CSS poiché è più adattabile ai progetti di siti Web reattivi.
Avvolgi testo attorno all'immagine usando HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augusta lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
Per fare in modo che il testo si sposti lungo il lato destro dell'immagine, devi allineare l'immagine a sinistra:
Il tuo testo va qui.
Se vuoi che il testo appaia a sinistra e l'immagine appaia all'estrema destra, modifica il parametro di allineamento a "destra".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augusta lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.
Il tuo testo va qui.
Questo è tutto! Abbastanza facile vero? L'unica volta che vorresti usare il CSS è se vuoi aggiungere dei margini alle immagini, in modo che ci sia dello spazio tra il testo e l'immagine.
È possibile aggiungere margini a un'immagine utilizzando il seguente codice di stile CSS:
Il tuo testo va qui.
Il codice precedente utilizza l'elemento MARGIN CSS per aggiungere 10 pixel di spazio bianco sul lato destro dell'immagine. Poiché abbiamo allineato l'immagine a sinistra, vogliamo aggiungere gli spazi bianchi a destra.
Fondamentalmente, i quattro numeri rappresentano IN ALTO A DESTRA BASSO A SINISTRA. Quindi se vuoi aggiungere lo spazio bianco ad un'immagine allineata a destra, dovresti fare questo:
Il tuo testo va qui.
Quindi è abbastanza semplice usare l'HTML per eseguire questa attività, ma ancora una volta potrebbe non funzionare bene per i siti reattivi.
Avvolgi testo attorno all'immagine usando i CSS
Il modo migliore per avvolgere il testo intorno a un'immagine è utilizzare i CSS. Ti offre un controllo più preciso della grana sul posizionamento degli elementi e funziona meglio con i moderni standard di codifica.
Anche se ho incluso i CSS direttamente nel tag immagine nell'esempio HTML, non dovresti farlo neanche più. Invece, dovresti avere un file separato chiamato un foglio di stile che contiene tutto il tuo codice CSS.
Nel tag IMG, assegni semplicemente una classe al tag e dagli un nome. Nel mio esempio, ho chiamato la classe a sinistra . Nel mio foglio di stile, tutto ciò che devo fare è aggiungere il seguente codice:
.left {float: left; padding: 0 10px 0 0;} Come puoi vedere, ho aggiunto 10px di padding sul lato destro dell'immagine allineata a sinistra. Ho anche usato la proprietà float per spostare l'immagine fuori dal flusso normale del documento e metterla sul lato sinistro del contenitore principale.
Come puoi vedere, è molto più pulito dell'aggiunta di tutto quel codice al tag IMG stesso. È anche più facile da gestire e puoi utilizzare molte più proprietà CSS per personalizzare l'aspetto della tua pagina web. Se avete domande, sentitevi liberi di commentare. Godere!
