Computer help - file server


[ Blog ] - [ File Server ] - [ Удаленная компьютерная помощь ]

De code nodig om tekst rond een afbeelding te laten lopen? Normaal gesproken verloopt alles lineair wanneer u een HTML-pagina maakt, dat wil zeggen het ene blok direct na het andere. Al mijn vorige berichten zijn hier een voorbeeld van, d.w.z. tekst, dan foto, dan tekst, etc.

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



Tegenwoordig raadt het W3C echter aan om CSS te gebruiken in plaats van HTML voor dit soort taken.Ik noem beide methoden hieronder, 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 een ​​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 u de afbeelding links uitlijnen:

Uw tekst komt hier.

Als u wilt dat de tekst aan de linkerkant verschijnt en de afbeelding helemaal rechts, verander dan gewoon de uitlijnparameter naar "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 een ​​felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

Uw tekst komt hier.

Dat is het! Best makkelijk toch? De enige keer dat u CSS zou willen 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-stijlcode te gebruiken:

Uw tekst komt hier.

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.

In wezen vertegenwoordigen de vier cijfers RECHTS BOVEN ONDER LINKS. Dus als u de witruimte aan een rechts uitgelijnde afbeelding wilt toevoegen, doet u dit:

Uw tekst komt hier.

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.Tekst om een ​​afbeelding laten lopen met CSS

De betere manier om tekst om een ​​afbeelding te laten lopen, is door CSS te gebruiken. Het geeft je meer controle over de fijnkorreligheid van 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 eigenlijk ook 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 klas links. 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 padding aan de rechterkant van de links uitgelijnde afbeelding toegevoegd. 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 u vragen heeft, kunt u reageren. Geniet ervan!

.
SETUP UA COMPUTER BLOG