Heb je de code nodig om tekst rond een afbeelding te laten lopen? Normaal gesproken stroomt alles lineair wanneer u een HTML -pagina maakt, wat betekent dat het ene blok direct na het andere volgt. ^(HTML)Al mijn eerdere berichten zijn hier een voorbeeld van, dwz tekst, dan afbeelding, dan tekst, enz.

Soms wil je misschien tekst naast een afbeelding plaatsen in plaats van eronder. Dit wordt tekstomloop rond de afbeelding genoemd. Het is eigenlijk vrij eenvoudig om tekst terug te laten lopen met HTML . Merk op dat u geen CSS hoeft te gebruiken om tekst terug te laten lopen.

Tegenwoordig raadt het W3C echter aan om voor dit soort taken CSS te gebruiken in plaats van HTML . Ik zal beide methoden hieronder noemen, maar als je kunt, is het beter om CSS te gebruiken, omdat het beter kan worden aangepast aan responsieve website-ontwerpen.

Wikkel tekst rond afbeelding met behulp van 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.

Om de tekst langs de rechterkant van de afbeelding te laten lopen, moet je de afbeelding links uitlijnen:

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

Als u wilt dat de tekst aan de linkerkant verschijnt en de afbeelding helemaal rechts, wijzigt u de uitlijningsparameter in "rechts".

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>

Dat is het! Lekker^(Pretty) makkelijk toch? De enige keer dat u CSS^(CSS) wilt gebruiken, is als u marges aan de afbeeldingen wilt toevoegen, zodat er wat ruimte is tussen de tekst en de afbeelding.

U kunt marges aan een afbeelding toevoegen door de volgende CSS -stylingcode te gebruiken:

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

De bovenstaande code gebruikt het MARGIN CSS - element om 10 pixels witruimte aan de rechterkant van de afbeelding toe te voegen. Omdat we de afbeelding links hebben uitgelijnd, willen we de witruimte aan de rechterkant toevoegen.

Kortom, de vier cijfers vertegenwoordigen RECHTS BOVENONDER LINKS^{(TOP RIGHT BOTTOM LEFT)} . Dus als u de witruimte wilt toevoegen aan een rechts uitgelijnde afbeelding, doet u dit:

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

Het is dus vrij eenvoudig om HTML te gebruiken om deze taak uit te voeren, maar nogmaals, het werkt mogelijk niet goed voor responsieve sites.

Wikkel tekst rond afbeelding met behulp van CSS

De betere manier om tekst rond een afbeelding te laten lopen, is door CSS te gebruiken . Het geeft je meer controle over de positionering van de elementen en werkt beter met moderne codeerstandaarden.

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

Hoewel ik CSS rechtstreeks in de afbeeldingstag in het HTML - voorbeeld heb opgenomen, zou je dat ook echt nooit meer moeten doen. In plaats daarvan zou u een apart bestand moeten hebben, een stylesheet genaamd, dat al uw CSS -code bevat.

In de IMG -tag wijst u eenvoudig een klasse toe aan de tag en geeft u deze een naam. In mijn voorbeeld noemde ik de klasse left . In mijn stylesheet hoef ik alleen maar de volgende code toe te voegen:

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

Zoals je kunt zien, heb ik 10px opvulling toegevoegd aan de rechterkant van de links uitgelijnde afbeelding. Ik heb ook de eigenschap float gebruikt om de afbeelding uit de normale stroom van het document te verplaatsen en aan de linkerkant van de bovenliggende container te plaatsen.

Zoals je kunt zien, is het veel schoner dan al die code aan de IMG -tag zelf toe te voegen. Het is ook gemakkelijker te beheren en u kunt veel meer CSS - eigenschappen gebruiken om het uiterlijk van uw webpagina aan te passen. Als je vragen hebt, voel je vrij om commentaar te geven. Genieten van!

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 one block directly after another. All of my previous posts are an example of this, i.e. text, thеn 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

• Een QR-code scannen op iPhone en Android

• Tekstberichten afdrukken vanuit Android

• Een lijst met lopende processen opslaan in een tekstbestand in Windows

• Bestanden downloaden en code bekijken van GitHub

• Zoeken in meerdere tekstbestanden tegelijk

• Hoe de broncode van een open source-software te bekijken

• GIMP-plug-ins installeren: een handleiding

• Tekst buigen in Photoshop

• Verwijder onmiddellijk achtergronden van afbeeldingen met behulp van AI

• Tekstvakken koppelen in Adobe InDesign

• Hoe maak je een QR-code

• Tekst verwijderen van pictogrammen in de Windows-taakbalk

• 2 Hulpmiddelen om online zoekopdrachten in omgekeerde volgorde uit te voeren

• Hoe Google Chrome offline (zelfstandig) installatieprogramma te downloaden

• Hoe u uw Windows-pc wakker kunt houden zonder de muis aan te raken

• Uitvoer van de Windows-opdrachtregel omleiden naar een tekstbestand

• Verwijder de tekstlabels van bureaubladpictogrammen in Windows 7/8/10

• 8 van de beste technische ideeën om met zelfisolatie om te gaan

• Tekst rond een afbeelding laten lopen in InDesign

• Een HTML-bestand openen in Google Chrome