Behöver koden sammanfoga 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 hjälp av 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 ihop 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:
Din text går här.
Ovanstående kod använder MARGIN CSS-elementet för att lägga till 10 pixlar av blankutrymme på höger sida av bilden. Eftersom vi har anpassat bilden till vänster vill vi lägga till vitrummet till höger.
I grund och botten representerar de fyra siffrorna TOP RIGHT BOTTOM LEFT. Så om du vill lägga till det vita utrymmet i en högerlinjad bild skulle du göra det här:
Din text går här.
Så det är ganska enkelt att använda HTML för att utföra den här uppgiften, men än en gång kan det inte fungera bra för lyhörda webbplatser.
Wrap Text Around Image med hjälp av CSS
Det bättre sättet att sätta in text runt en bild är att använda CSS. Det ger dig mer fin kornkontroll över placeringen av elementen och fungerar bättre med moderna kodningsstandarder.
Även om jag inkluderade CSS direkt i bildtaggen i HTML-exemplet, så borde du aldrig 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 kvar . 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äldralådan.
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 många fler CSS-egenskaper för att anpassa utseendet på din webbsida. Om du har några frågor, var god att kommentera. Njut av!
