Hai bisogno del codice per avvolgere il testo attorno a un'immagine? Normalmente quando crei una pagina HTML , tutto scorre in modo lineare, ovvero un blocco subito dopo l'altro. Tutti i miei post precedenti ne sono un esempio, ad esempio testo, poi immagine, poi testo, ecc.

A volte potresti voler includere del testo accanto a un'immagine invece che sotto di essa. Questo è chiamato avvolgere il testo attorno all'immagine. In realtà è abbastanza facile avvolgere il testo usando HTML . Nota che non è necessario utilizzare CSS per avvolgere il testo.

Tuttavia, in questi giorni il W3C consiglia di utilizzare CSS invece di HTML per questo tipo di attività. Di seguito menzionerò entrambi i metodi, ma se puoi, è meglio usare CSS poiché è più adattabile ai progetti di siti Web reattivi.

Avvolgi il testo intorno 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 augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Per far scorrere il testo lungo il lato destro dell'immagine, devi allineare l'immagine a sinistra:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Se vuoi che il testo appaia a sinistra e l'immagine all'estrema destra, cambia semplicemente il parametro di allineamento su "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 augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

Questo è tutto! Abbastanza^(Pretty) facile vero? L'unica volta che vorresti usare i CSS è se vuoi aggiungere margini alle immagini, in modo che ci sia dello spazio tra il testo e l'immagine.

Puoi aggiungere margini a un'immagine utilizzando il seguente codice di stile CSS :

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

Il codice sopra 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 lo spazio bianco a destra.

Fondamentalmente, i quattro numeri rappresentano IN ALTO A DESTRA IN BASSO A SINISTRA^{(TOP RIGHT BOTTOM LEFT)} . Quindi, se vuoi aggiungere lo spazio bianco a un'immagine allineata a destra, dovresti farlo:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

Quindi è abbastanza semplice utilizzare HTML per eseguire questa attività, ma ancora una volta potrebbe non funzionare bene per i siti reattivi.

Avvolgi il testo intorno all'immagine usando CSS

Il modo migliore per avvolgere il testo attorno a un'immagine è usare CSS . Ti dà un controllo più fine della grana sul posizionamento degli elementi e funziona meglio con i moderni standard di codifica.

<img src="IMAGE URL" alt="A photo" class="left" />

Anche se ho incluso i CSS direttamente nel tag dell'immagine nell'esempio HTML , non dovresti mai più farlo. Invece, dovresti avere un file separato chiamato foglio di stile che contiene tutto il tuo codice CSS .

Nel tag IMG , assegni semplicemente una classe al tag e gli dai 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 riempimento 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 padre.

Come puoi vedere, è molto più pulito che aggiungere tutto quel codice al tag IMG stesso. ^(IMG)È 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. Divertiti!

HTML Code to Wrap Text Around Image

Neеd the code to wrap text around an imаge? Normally when yoυ сreate an HTML page, everything flows linearly, meaning one block directly after another. All of my previous posts are an example оf this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using 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 augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

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 augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Come scansionare un codice QR su iPhone e Android

• Come stampare messaggi di testo da Android

• Salva un elenco di processi in esecuzione in un file di testo in Windows

• Come scaricare file e visualizzare il codice da GitHub

• Cerca all'interno di più file di testo contemporaneamente

• Come disabilitare la chiave di Windows

• Come costruire il tuo laptop

• Risolto il problema con "Il dispositivo non può avviarsi. (Codice 10)” Errore

• Crea un backup dell'immagine di sistema di Windows 10

• Come convertire un disco dinamico in un disco di base

• Rimuovi istantaneamente gli sfondi dalle immagini usando l'IA

• 2 Strumenti per eseguire ricerche di immagini inverse online

• Come visualizzare il codice sorgente di un software open source

• Come trasferire messaggi di testo da iPhone ad Android

• Rimuovere le etichette di testo dalle icone del desktop in Windows 7/8/10

• Come mantenere sveglio il tuo PC Windows senza toccare il mouse

• Come ruotare testo e immagini in Photoshop

• Come aprire un file bloccato quando un altro programma lo sta utilizzando

• Come aggiungere Shadow a Text or Image in GIMP

• Come eseguire uno stress test della CPU