Hai bisogno del codice per avvolgere il testo intorno 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, quindi immagine, quindi 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 spazio tra il testo e l'immagine.
È possibile aggiungere margini a un'immagine utilizzando il seguente codice di stile CSS:
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 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 normale flusso del documento e metterla sul lato sinistro del contenitore genitore.
Come puoi vedere, è molto più pulito di aggiungere 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!