How to wrap a text around an image using CSS

Question

Below is my code. I wished to wrap my text around the image. I used q {float: left; width: 100%}. However, the text appeared below the image.

<p class = "review">
  <img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
  <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>

Is there any other way to wrap my text around the image? Thank you!

Answer 1

<p class = "review">
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" style="float:left"/>
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>

Answer 2

Change the <q> display property to display:inline and remove the width property. That will align it next to the image

Answer 3

You actually need to float the image left. That will cause the behavior you want - having the text wrap around the image.

Answer 4

You can use span tages or use display:inline in your css:

Working demo

<span>Hello!</span><span><img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" /></span><span>How are you!</span>

Answer 5

You want to float the image not q

.review {width:100%;}
.review img {float:left; margin:7px; vertical-align:top;}

<p class = "review">
<img src="https://webster.cs.washington.edu/images/fresh.gif" alt="Fresh" />
<q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
  <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
  <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
</p>