Heb je de code nodig om tekst rond een afbeelding te laten lopen? Normaal gesproken stroomt bij het maken van een HTML-pagina alles lineair, het ene blok direct na het andere. Al mijn vorige berichten zijn hier een voorbeeld van, tekst, dan afbeelding, dan tekst, etc.
Soms wilt u misschien tekst naast een afbeelding opnemen in plaats van eronder. Dit wordt wrapping-tekst rond de afbeelding genoemd. Het is eigenlijk vrij eenvoudig om tekst in te pakken met HTML. Merk op dat je geen CSS hoeft te gebruiken om tekst in te pakken.
Tegenwoordig raadt het W3C echter aan om CSS te gebruiken in plaats van HTML voor dit soort taken. Ik noem beide onderstaande methoden, maar als je kunt, is het beter om CSS te gebruiken, omdat het beter aanpasbaar is aan responsieve websiteontwerpen.
Wikkel tekst rond afbeelding met 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 wikkelen, moet u de afbeelding links uitlijnen:
Je tekst komt hier.
Als u wilt dat de tekst links wordt weergegeven en de afbeelding helemaal rechts wordt weergegeven, wijzigt u de align-parameter in "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.
Je tekst komt hier.
Dat is het! Best gemakkelijk toch? De enige keer dat u CSS zou willen gebruiken, is als u marges aan de afbeeldingen wilt toevoegen, zodat er wat ruimte tussen de tekst en de afbeelding is.
U kunt marges aan een afbeelding toevoegen met behulp van de volgende CSS-stylingcode:
Je tekst komt hier.
De bovenstaande code gebruikt het MARGE CSS-element om 10 pixels witruimte toe te voegen aan de rechterkant van de afbeelding. Omdat we de afbeelding links hebben uitgelijnd, willen we de witruimte aan de rechterkant toevoegen.
Kortom, de vier cijfers vertegenwoordigen TOP RECHTS BOVEN LINKS. Dus als u de witte ruimte wilt toevoegen aan een afbeelding die aan de rechterkant is uitgelijnd, doet u het volgende:
Je tekst komt hier.
Dus het is vrij eenvoudig om HTML te gebruiken om deze taak uit te voeren, maar nogmaals, het werkt misschien niet goed voor responsieve sites.
Wikkel tekst rond afbeelding met CSS
De beste manier om tekst om een afbeelding te laten lopen is door CSS te gebruiken. Het geeft u meer fijnkorrelige controle over de positionering van de elementen en werkt beter met moderne coderingsstandaarden.
Hoewel ik CSS rechtstreeks in de afbeeldingstag in het HTML-voorbeeld heb opgenomen, zou je dat ook nooit meer moeten doen. In plaats daarvan zou u een apart bestand moeten hebben, genaamd een stylesheet die 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 links . In mijn stylesheet hoef ik alleen maar de volgende code toe te voegen:
.left {float: left; opvulling: 0 10px 0 0;} Zoals je kunt zien, heb ik 10px padding toegevoegd aan de rechterkant van de links uitgelijnde afbeelding. Ik heb ook de eigenschap float gebruikt om het beeld uit de normale stroom van het document te verplaatsen en het aan de linkerkant van de bovenliggende container te plaatsen.
Zoals u kunt zien, is het veel schoner dan al die code aan de IMG-tag zelf toe te voegen. Het is ook eenvoudiger te beheren en u kunt veel CSS-eigenschappen gebruiken om de weergave op uw webpagina aan te passen. Als je vragen hebt, reageer dan gerust. Genieten!
