How do I wrap text around an image?-CodePudding

I'm making a website using html and CSS and I've been trying to find a way to put text on the same line as an image instead of just above and below it. It would be easier if the solution was in html because I know html a lot better than css

I tried alligning the text but it just stayed above and below the image. I tried to add more characters but same problem. It didn't wrap, it just made the page longer

CodePudding user response：

Simply you can use the CSS shape-outside Property to wrap the text with image. The shape-outside Property comes with values ,

shape-outside: none |<shape-box&gt>  | <basic-shape> | <image> | initial | inherit

As the example for the above question:

img {
  width: 400px;
  shape-outside: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/circle.png'); 
}

.img1{
  float: left;
}

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/circle.png" alt="" />

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci, libero quae nihil porro debitis laboriosam inventore animi impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni expedita?
</p>