Tarvitsetko koodia tekstin käärimiseen kuvan ympärille? Normaalisti kun luot HTML - sivun, kaikki sujuu lineaarisesti, eli lohkot suoraan toisensa jälkeen. Kaikki aiemmat kirjoitukseni ovat tästä esimerkki, eli teksti, sitten kuva, sitten teksti jne.

Joskus saatat haluta sisällyttää tekstiä kuvan viereen sen alle. Tätä kutsutaan tekstin käärimiseksi kuvan ympärille. Tekstin rivittäminen HTML^(HTML) :llä on itse asiassa melko helppoa . Huomaa, että sinun ei tarvitse käyttää CSS :ää tekstin rivittämiseen.

Nykyään W3C kuitenkin suosittelee CSS :n käyttöä ^(CSS)HTML :n sijaan tällaisiin tehtäviin. Mainitsen molemmat menetelmät alla, mutta jos voit, on parempi käyttää CSS :ää, koska se soveltuu paremmin reagoivaan verkkosivustojen suunnitteluun.

Kääri teksti kuvan ympärille HTML:n avulla

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.

Jotta teksti kääriisi kuvan oikealle puolelle, sinun on kohdistettava kuva vasemmalle:

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

Jos haluat tekstin näkyvän vasemmalla ja kuvan näkyvän äärioikealla, muuta vain tasausparametri "oikealle".

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>

Se siitä! Aika^(Pretty) helppoa eikö? Ainoa kerta, kun haluat käyttää CSS :ää, on lisätä kuviin marginaaleja, jotta tekstin ja kuvan väliin jää tilaa.

Voit lisätä kuvaan marginaaleja käyttämällä seuraavaa CSS - tyylikoodia:

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

Yllä oleva koodi käyttää MARGIN CSS -elementtiä lisäämään 10 pikseliä tyhjää tilaa kuvan oikealle puolelle. Koska olemme tasaanneet kuvan vasemmalle, haluamme lisätä välilyönnin oikealle.

Pohjimmiltaan neljä numeroa edustavat OIKEA YLÄLLÄ ALA VASEMMAA^{(TOP RIGHT BOTTOM LEFT)} . Joten jos haluat lisätä valkoisen tilan oikealle tasattuun kuvaan, toimi näin:

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

Joten HTML^(HTML) :n käyttäminen tämän tehtävän suorittamiseen on melko helppoa , mutta jälleen kerran, se ei välttämättä toimi hyvin reagoivilla sivustoilla.

Kääri teksti kuvan ympärille CSS:n avulla

Parempi tapa kääriä tekstiä kuvan ympärille on käyttää CSS :ää . Sen avulla voit paremmin hallita elementtien sijoittelua ja se toimii paremmin nykyaikaisten koodausstandardien kanssa.

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

Vaikka sisällytin CSS :n suoraan kuvatunnisteeseen HTML - esimerkissä, sinun ei todellakaan pitäisi tehdä sitä enää koskaan. Sen sijaan sinulla pitäisi olla erillinen tiedosto nimeltä tyylitaulukko, joka sisältää kaiken CSS - koodisi.

IMG - tunnisteessa määrität tunnisteelle luokan ja annat sille nimen. Esimerkissäni annoin luokan vasemmalle^(left) nimeksi . Tyylisivulleni minun tarvitsee vain lisätä seuraava koodi:

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

Kuten näet, lisäsin 10 pikseliä pehmusteen vasemmalle tasatun kuvan oikealle puolelle. Käytin myös float-ominaisuutta kuvan siirtämiseen pois normaalista asiakirjavirrasta ja sijoittamiseen pääsäiliön vasemmalle puolelle.

Kuten näet, se on paljon puhtaampaa kuin kaiken koodin lisääminen itse IMG - tunnisteeseen. Sitä on myös helpompi hallita, ja voit käyttää paljon enemmän CSS -ominaisuuksia muokataksesi verkkosivusi ulkoasua. Jos sinulla on kysyttävää, kommentoi. Nauttia!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create an HTML page, everything flows linearly, meaning one block direсtly after another. All of my previous posts are an exаmple of this, i.e. text, then pictυre, 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

• QR-koodin skannaus iPhonessa ja Androidissa

• Kuinka tulostaa tekstiviestejä Androidista

• Tallenna käynnissä olevien prosessien luettelo tekstitiedostoon Windowsissa

• Kuinka ladata tiedostoja ja katsella koodia GitHubista

• Etsi useista tekstitiedostoista kerralla

• Kuinka nopeasti kääriä tekstiä Google Sheetsissä?

• Ohjaa ulostulo Windowsin komentoriviltä tekstitiedostoon

• Kuinka lisätä musiikkia Google Slidesiin

• Kuinka ottaa kuvakaappauksia Nintendo Switchillä

• Poista välittömästi taustat kuvista tekoälyn avulla

• Muunna teksti HTML- tai XHTML-muotoon Windows PC:n MarkdownPadin avulla

• Kuinka luoda ja skannata Spotify-koodi

• 8 parasta teknistä ideaa itseeristyksen selvittämiseksi

• Kirja-arvostelu - Windows 8 -käyttöopas

• 2 työkalua käänteisen kuvahaun suorittamiseen verkossa

• Lukitun tiedoston avaaminen, kun toinen ohjelma käyttää sitä

• SynWrite Editor: ilmainen teksti- ja lähdekoodieditori Windows 10:lle

• Tekstin siirtäminen kuvan ympärille InDesignissa

• Kuinka pitää tietokoneohjelmistosi päivitettynä automaattisesti

• Kuinka pitää Windows-tietokoneesi hereillä koskematta hiireen