Behöver du koden för att linda text runt en bild? Normalt när du skapar en HTML- sida flyter allt linjärt, vilket innebär ett block direkt efter det andra. Alla mina tidigare inlägg är ett exempel på detta, dvs text, sedan bild, sedan text osv.

Ibland kanske du vill inkludera text bredvid en bild istället för under den. Detta kallas att linda text runt bilden. Det är faktiskt ganska enkelt att radbryta text med HTML . Observera att du inte behöver använda CSS för att radbryta text.

Men nu för tiden rekommenderar W3C att man använder ^(W3C)CSS istället för HTML för den här typen av uppgifter. Jag kommer att nämna båda metoderna nedan, men om du kan är det bättre att använda CSS eftersom det är mer anpassningsbart till responsiv webbdesign.

Linda text runt bilden med 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.

För att få texten att radbrytas längs höger sida av bilden måste du rikta in bilden till vänster:

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

Om du vill att texten ska visas till vänster och bilden längst till höger, ändra bara parametern align till "höger".

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>

Det är allt! Ganska^(Pretty) lätt eller hur? Den enda gången du skulle vilja använda CSS är om du vill lägga till marginaler på bilderna, så att det blir lite mellanrum mellan texten och bilden.

Du kan lägga till marginaler på en bild genom att använda följande CSS -stylingkod:

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

Ovanstående kod använder MARGIN CSS- elementet för att lägga till 10 pixlar av blanksteg på höger sida av bilden. Eftersom vi har justerat bilden till vänster vill vi lägga till blanktecken till höger.

I grund och botten representerar de fyra siffrorna ÖVERST HÖGER NEDRE VÄNSTER^{(TOP RIGHT BOTTOM LEFT)} . Så om du vill lägga till det vita utrymmet till en högerjusterad bild, gör du så här:

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

Så det är ganska enkelt att använda HTML för att utföra denna uppgift, men återigen kanske det inte fungerar bra för responsiva webbplatser.

Linda text runt bilden med CSS

Det bättre sättet att linda text runt en bild är att använda CSS . Det ger dig mer finkornig kontroll över elementens placering och fungerar bättre med moderna kodningsstandarder.

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

Även om jag inkluderade CSS direkt i bildtaggen i HTML - exemplet, borde du verkligen aldrig göra det längre heller. Istället bör du ha en separat fil som kallas en stilmall som innehåller all din CSS -kod.

I IMG -taggen tilldelar du helt enkelt taggen en klass och ger den ett namn. I mitt exempel döpte jag klassen till vänster^(left) . I min stilmall behöver jag bara lägga till följande kod:

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

Som du kan se lade jag till 10px utfyllnad till höger sida av den vänsterjusterade bilden. Jag använde också float-egenskapen för att flytta bilden ur det normala flödet av dokumentet och placera den på vänster sida av den överordnade behållaren.

Som du kan se är det mycket renare än att lägga till all den koden till själva IMG -taggen. Det är också lättare att hantera och du kan använda många fler CSS- egenskaper för att anpassa utseendet på din webbsida. Om du har några frågor, kommentera gärna. Njut av!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally whеn yoυ create an HTML page, everything flows linearly, meaning one block direсtly after another. All of my previous posts are an example of this, i.e. text, then picture, then text, еtc.

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

• Hur man skannar en QR-kod på iPhone och Android

• Hur man skriver ut textmeddelanden från Android

• Spara en lista över pågående processer till en textfil i Windows

• Hur man laddar ner filer och visar kod från GitHub

• Sök i flera textfiler samtidigt

• Hur man roterar text och bilder i Photoshop

• Hur man länkar textrutor i Adobe InDesign

• Åtgärda Windows Update-felkod 8E5E03FA

• Stäng av användarkontokontroll (UAC) för en specifik applikation

• SynWrite Editor: Gratis text- och källkodsredigerare för Windows 10

• Hur man skapar ett team i Microsoft Teams

• Konvertera text till HTML eller XHTML med MarkdownPad för Windows PC

• Hur man laddar ner Google Chrome Offline (fristående) installationsprogram

• Skapa en Windows 10 System Image Backup

• Hur man överför textmeddelanden från iPhone till Android

• Hur man öppnar en låst fil när ett annat program använder den

• Hur man visar källkoden för en programvara med öppen källkod

• Bokrecension - How-To Geek Guide to Windows 8

• Omdirigera utdata från Windows kommandorad till en textfil

• Hur man lägger till musik till Google Slides