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, vale a dire 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 consiglia l'uso di CSS anziché HTML per questo tipo di compiti. Menzionerò entrambi i metodi di seguito, ma se è possibile, è meglio utilizzare CSS poiché è più adattabile ai progetti di siti Web reattivi.
Avvolgi testo attorno all'immagine utilizzando 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 far sì che il testo si sposti lungo il lato destro dell'immagine, devi allineare l'immagine a sinistra:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
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.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
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.
Puoi aggiungere margini a un'immagine usando il seguendo il codice di stile CSS:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
Il codice sopra riportato utilizza l'elemento MARGIN CSS per aggiungere 10 pixel di spazio bianco sul lato destro dell'immagine. Dato che abbiamo allineato l'immagine a sinistra, vogliamo aggiungere gli spazi bianchi a destra.
Fondamentalmente, i quattro numeri rappresentano il BASSO DEL DESTRA SINISTRO A SINISTRA. Quindi se vuoi aggiungere lo spazio bianco ad un'immagine allineata a destra, dovresti fare questo:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
Quindi è abbastanza semplice usare l'HTML per eseguire questa operazione, ma una volta di nuovo, potrebbe non funzionare bene per i siti reattivi.
Avvolgere testo intorno all'immagine usando i CSS
Il modo migliore per avvolgere il testo intorno a un'immagine è usare i CSS. Ti offre un controllo a grana più fine sul posizionamento degli elementi e funziona meglio con i moderni standard di codifica.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Anche se ho incluso i CSS direttamente nel tag immagine nell'esempio HTML anche tu non dovresti mai farlo 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 left. 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 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. Buon divertimento!