Szüksége van a kódra a szöveg kép köré fonni? Általában egy HTML -oldal létrehozásakor minden lineárisan folyik, vagyis az egyik blokk közvetlenül a másik után történik. Az összes korábbi hozzászólásom erre példa, azaz szöveg, majd kép, majd szöveg stb.

Néha érdemes lehet szöveget elhelyezni a kép mellett, nem pedig alatta. Ezt hívják szöveg körbefedésének a kép körül. Valójában meglehetősen egyszerű a szöveg tördelése HTML használatával . Vegye figyelembe, hogy nem kell CSS -t használnia a szöveg tördeléséhez.

Napjainkban azonban a W3C a ^(W3C)CSS használatát javasolja a HTML helyett az ilyen jellegű feladatokhoz. Az alábbiakban mindkét módszert megemlítem, de ha teheti, jobb, ha CSS -t használ , mivel az jobban alkalmazkodik a reszponzív webhelyek kialakításához.

Tördelje a szöveget a kép köré HTML használatával

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.

Ahhoz, hogy a szöveg a kép jobb oldalára kerüljön, a képet balra kell igazítani:

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

Ha azt szeretné, hogy a szöveg a bal oldalon, a kép pedig a jobb szélen jelenjen meg, egyszerűen módosítsa az igazítási paramétert „jobbra”.

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>

Ez az! Elég^(Pretty) könnyű igaz? A CSS^(CSS) -t csak akkor érdemes használni , ha margót szeretne hozzáadni a képekhez, hogy legyen némi hely a szöveg és a kép között.

A következő CSS^(CSS) - stíluskóddal margókat adhat a képhez :

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

A fenti kód a MARGIN CSS elemet használja, hogy 10 pixel szóközt adjon a kép jobb oldalán. Mivel a képet balra igazítottuk, jobbra szeretnénk hozzáadni a szóközt.

Alapvetően a négy szám a JOBBRA FELSŐ BALAL FELSŐ^{(TOP RIGHT BOTTOM LEFT)} . Tehát ha egy jobbra igazított képhez szeretné hozzáadni a szóközt, tegye a következőket:

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

Tehát meglehetősen egyszerű a HTML használata ennek a feladatnak a végrehajtására, de előfordulhat, hogy ez még egyszer nem működik megfelelően reszponzív webhelyeken.

Törölje a szöveget a kép köré CSS segítségével

A szöveg kép körüli körbefűzésének jobb módja a CSS használata . Finomabb szemcsés szabályozást tesz lehetővé az elemek elhelyezése felett, és jobban működik a modern kódolási szabványokkal.

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

Annak ellenére, hogy a HTML -példában a ^(HTML)CSS -t közvetlenül beépítettem a képcímkébe , ezt soha többé nem szabad megtennie. Ehelyett rendelkeznie kell egy stíluslap nevű külön fájllal, amely az összes CSS -kódot tartalmazza.

Az IMG címkében egyszerűen hozzárendel egy osztályt a címkéhez, és ad neki egy nevet. Példámban balra^(left) neveztem el az osztályt . A stíluslapomban csak a következő kódot kell hozzáadnom:

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

Amint látja, a balra igazított kép jobb oldalához 10 képpontos kitöltést adtam. A float tulajdonságot arra is használtam, hogy a képet kimozdítsam a dokumentum normál folyamatából, és a szülőtároló bal oldalára helyezzem.

Amint látja, ez sokkal tisztább, mintha ezt a kódot magához az IMG címkéhez adná. Ezenkívül könnyebben kezelhető, és sokkal több CSS -tulajdont használhat a weboldal megjelenésének testreszabásához. Ha kérdése van, nyugodtan írjon megjegyzést. Élvezd!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create an HTML pаge, everything flows linearly, meaning оne block directly after another. All of my previous posts are an example of 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

• QR-kód beolvasása iPhone-on és Androidon

• Szöveges üzenetek nyomtatása Androidról

• Mentse el a futó folyamatok listáját egy szöveges fájlba a Windows rendszerben

• Fájlok letöltése és kód megtekintése a GitHubból

• Keresés egyszerre több szöveges fájlban

• SynWrite Editor: Ingyenes szöveg- és forráskódszerkesztő Windows 10 rendszerhez

• 2 Eszközök fordított képkereséshez online

• A Google Chrome Offline (önálló) telepítő letöltése

• Az AI segítségével azonnal távolítsa el a háttereket a képekről

• Zene hozzáadása a Google Diákhoz

• HTML beágyazása Google-dokumentumba

• Hozzon létre egy Windows 10 rendszerkép biztonsági másolatot

• Hogyan végezzünk CPU feszültségtesztet

• Szöveg kibontása PDF- és képfájlokból

• Szövegdobozok csatolása az Adobe InDesign programban

• Hogyan készítsünk QR-kódot

• Ingyenes online OCR-webhelyek és szolgáltatások szövegek képből való kinyeréséhez

• Hogyan hozzunk létre csapatot a Microsoft Teamsben

• Hogyan alakítsunk át egy dinamikus lemezt alaplemezvé

• Hogyan lehet megnyitni egy zárolt fájlt, ha egy másik program használja