Har du brug for koden til at ombryde tekst omkring et billede? Normalt når du opretter en HTML -side, flyder alt lineært, hvilket betyder den ene blok direkte efter den anden. Alle mine tidligere indlæg er et eksempel på dette, altså tekst, så billede, så tekst osv.

Nogle gange vil du måske inkludere tekst ved siden af ​​et billede i stedet for under det. Dette kaldes at pakke tekst rundt om billedet. Det er faktisk ret nemt at ombryde tekst ved hjælp af HTML . Bemærk, at du ikke behøver at bruge CSS for at ombryde tekst.

Men i disse dage anbefaler W3C at bruge CSS i stedet for HTML til denne slags opgaver. Jeg vil nævne begge metoder nedenfor, men hvis du kan, er det bedre at bruge CSS , da det er mere tilpasset responsive hjemmesidedesigns.

Ombryd tekst omkring billede ved hjælp af 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. Ud pellentesque nunc in lorem egestas non imperdiet enim congue.

For at få teksten ombrydet langs højre side af billedet, skal du justere billedet til venstre:

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

Hvis du ønsker, at teksten skal vises til venstre, og billedet skal vises yderst til højre, skal du blot ændre justeringsparameteren til "højre".

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. Ud pellentesque nunc in lorem egestas non imperdiet enim congue.

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

Det er det! Ret^(Pretty) nemt ikke? Den eneste gang du ønsker at bruge CSS er hvis du vil tilføje marginer til billederne, så der er lidt mellemrum mellem teksten og billedet.

Du kan tilføje margener til et billede ved at bruge følgende CSS -stylingkode:

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

Ovenstående kode bruger MARGIN CSS - elementet til at tilføje 10 pixels hvidt mellemrum på højre side af billedet. Da vi har justeret billedet til venstre, vil vi tilføje hvidrummet til højre.

Grundlæggende repræsenterer de fire tal ØVERST HØJRE NEDERST TIL VENSTRE^{(TOP RIGHT BOTTOM LEFT)} . Så hvis du vil tilføje det hvide mellemrum til et højrejusteret billede, vil du gøre dette:

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

Så det er ret simpelt at bruge HTML til at udføre denne opgave, men endnu en gang fungerer det muligvis ikke godt for responsive websteder.

Ombryd tekst omkring billede ved hjælp af CSS

Den bedre måde at ombryde tekst omkring et billede på er at bruge CSS . Det giver dig mere finkornet kontrol over placeringen af ​​elementerne og fungerer bedre med moderne kodningsstandarder.

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

Selvom jeg inkluderede CSS direkte i billedtagget i HTML - eksemplet, bør du heller aldrig gøre det mere. I stedet bør du have en separat fil kaldet et stylesheet, der indeholder hele din CSS -kode.

I IMG -tagget tildeler du blot en klasse til tagget og giver det et navn. I mit eksempel navngav jeg klassen venstre^(left) . I mit stylesheet er alt, hvad jeg skal gøre, at tilføje følgende kode:

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

Som du kan se, tilføjede jeg 10px polstring til højre side af det venstrejusterede billede. Jeg brugte også float-egenskaben til at flytte billedet ud af dokumentets normale flow og placere det til venstre side af den overordnede container.

Som du kan se, er det meget renere end at tilføje al den kode til selve IMG -tagget. Det er også nemmere at administrere, og du kan bruge mange flere CSS - egenskaber til at tilpasse udseendet på din webside. Hvis du har spørgsmål, er du velkommen til at kommentere. God fornøjelse!

HTML Code to Wrap Text Around Image

Need the code to wrap text around an imаge? Normally when you create an HTML page, everything flows lineаrly, meaning onе block directly after another. All of my previous рosts 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

• Sådan scanner du en QR-kode på iPhone og Android

• Sådan udskrives tekstbeskeder fra Android

• Gem en liste over kørende processer til en tekstfil i Windows

• Sådan downloader du filer og se kode fra GitHub

• Søg i flere tekstfiler på én gang

• Sådan udføres en CPU-stresstest

• Sådan fjerner du tekst fra ikoner på proceslinjen i Windows

• Boganmeldelse - How-To Geek Guide til Windows 8

• Sådan roteres tekst og billeder i Photoshop

• Sådan åbner du en HTML-fil i Google Chrome

• Opret en Windows 10 System Image Backup

• Sådan kurver du tekst i Photoshop

• Sådan får du vist kildekoden til et stykke open source software

• Sådan deaktiveres Windows-nøglen

• Fjern tekstetiketter fra skrivebordsikoner i Windows 7/8/10

• Fjern øjeblikkeligt baggrunde fra billeder ved hjælp af AI

• Ret Windows Update-fejlkode 8E5E03FA

• Sådan bygger du din egen bærbare computer

• Sådan opdateres Raspberry Pi

• SynWrite Editor: Gratis tekst- og kildekodeeditor til Windows 10