How to wrap text around an img in CSS?
Question
In HTML I have:
<section>
<h2>Title here</h2>
<article>
<div class = "image">
<img alt = "image title" src = "image location" height = "300" width = "231">
</div>
<h3> text that needs to be wrapped here</h3>
<p> here too</p>
</article>
</section>
How would I code this in CSS to wrap around the image?
3 answers
solution1
0 2020-09-12 05:50:39
.image{ float:left; width:30%; margin-right:10px; } .image img { display:block; width:100%; height:100px }
<section> <h2>Title here</h2> <article> <div> <div class="image"> <img s src="https://upload.wikimedia.org/wikipedia/commons/0/01/Aloe_vera_%284759242525%29.jpg" > </div> <div> <h3> text that needs to be wrapped here</h3> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div> </article> </section>
solution2
0 2020-09-12 06:09:14
Float to the rescue
body { margin: 20px; text-align: center; } img { float: left; margin: 5px; } p { text-align: justify; font-size: 25px; }
<body> <h1>Headline</h1> <div class="square"> <div> <img src="https://via.placeholder.com/150"/> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vulputate ut pharetra sit amet. Dui ut ornare lectus sit amet. Vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Mattis pellentesque id nibh tortor id aliquet. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Arcu risus quis varius quam quisque. Viverra ipsum nunc aliquet bibendum enim facilisis. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Hendrerit dolor magna eget est lorem ipsum. Hendrerit gravida rutrum quisque non tellus. Mauris sit amet massa vitae tortor condimentum. Nibh ipsum consequat nisl vel. Amet facilisis magna etiam tempor. </p> </div> </body>
solution3
0 2020-09-12 08:34:50
Your image needs to float so the text and can wrap around, we are all telling you this.
If the text has to wrap around a non-rectangular shape, shape-outside can be used too .
The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
Example with a rounded image
div.image img { float: left; border-radius: 50%; shape-outside: ellipse(160px 100px); border:solid; } h3,p {margin:0;}
<section> <h2>Title here</h2> <article> <div class="image"> <img alt=" title" src="http://dummyimage.com/300x200/e3de88&text=shape-outside"> </div> <h3> text that needs to be wrapped here</h3> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> <p> here too</p> </article> </section>
Here is some other example where the text can be layed inside fancy & complexe shapes: https://css-challenges.com/custom-text-shape/ & the pen that goes along https://codepen.io/t_afif/pen/eYpeOXB
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.