Behöver koden lägga in text runt en bild? Normalt när du skapar en HTML-sida, strömmar allt linjärt, vilket betyder ett block direkt efter det andra. Alla mina tidigare inlägg är ett exempel på detta, dvs text, sedan bild, text, etc.
Ibland kanske du vill inkludera text bredvid en bild istället för under den. Detta kallas wrapping text runt bilden. Det är faktiskt ganska lätt att sätta in text med hjälp av HTML. Observera att du inte behöver använda CSS för att lägga in text.
Men i dag rekommenderar W3C att använda CSS istället för HTML för sådana typer 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 mottagliga webbdesigner.
Wrap Text Around Image 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 des parturient montes, nascetur ridiculus mus. Alquam en felis vitae augue lobortis dictum. Innehållsförteckning visas. Ut pellentesque nunc i lorem egestas non imperdiet enim congue.
För att få texten att linda längs höger sida av bilden måste du anpassa bilden till vänster:
Din text går här.
Om du vill att texten ska visas till vänster och bilden som ska visas längst till höger, justera justeringsparametern 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 des parturient montes, nascetur ridiculus mus. Alquam en felis vitae augue lobortis dictum. Innehållsförteckning visas. Ut pellentesque nunc i lorem egestas non imperdiet enim congue.
Din text går här.
Det är allt! Ganska lätt rätt? Den enda gången du vill använda CSS är om du vill lägga till marginaler i bilderna så att det finns lite mellanrum mellan texten och bilden.
Du kan lägga till marginaler på en bild med hjälp av följande CSS-stylingskod:
Även om jag inkluderade CSS direkt i bildtaggen i HTML-exemplet, så borde du aldrig heller göra det heller heller. I stället bör du ha en separat fil som heter ett stilark som innehåller all din CSS-kod.
I IMG-taggen tilldelar du helt enkelt en klass till taggen och ger den ett namn. I mitt exempel namngav jag klassen vänster. I mitt stilark är allt jag behöver göra med att lägga till följande kod:
.left {float: left; vaddering: 0 10px 0 0;} Som du kan se lade jag till 10px av vaddering till höger om vänsterjusterad bild. Jag har också använt flytegenskapen för att flytta bilden ut ur dokumentets normala flöde och placera det på vänster sida av föräldrabehållaren.
Som du kan se är det mycket renare än att lägga all den koden till själva IMG-taggen. Det är också lättare att hantera och du kan använda mycket mer CSS-egenskaper för att anpassa utseendet på din webbsida. Om du har några frågor, var god att kommentera. Njut av!