Wrap text around swimming to the right

Question

Hi, I was creating a page, and I cannot get something to work. I have an image at the end of the paragraph, and in css this is floating right. I cannot make the image move up to be part of a paragraph, and then make text around it. JSFIDDLE

HTML

<p>
   TEXT GOES HERE
   <img src="src/src.jpg">
</p>

CSS

img{
   float:right;
}

Be sure to check out JSfiddle, because it has a better idea of ​​what I want.

Answer 1

You will need to move the image over the text to float the right to work this way.

<p>
   <img src="src/src.jpg">

   TEXT GOES HERE
</p>

Answer 2

You must either move the image to the front or move it outside:

<p>
   <img src="src/src.jpg">
   TEXT GOES HERE
</p>

or

   <img src="src/src.jpg">
<p>

   TEXT GOES HERE
</p>

Answer 3

, . ,

<p>
  TEXT GOES HERE<br>
  <img src="src/src.jpg">
  TEXT GOES HERE
</p>

, , .

Answer 4

Place a <div>inside your paragraph and save your text inside it. Then do as float: leftyour imagefloat: right

Something like below:

HTML sample JSFiddle

<p>
    <div> THIS IS A LOT OF TEXT 
           ........................
           .........................
    </div>
    <!-- MOVE THIS IMAGE UP SO IT NOT BELOW AND WRAP TEXT AROUND IT -->
    <img src="..Troll-face.png" />
</p>

CSS

img{
    float:right;
    width:150px;
}

p {
    width:100%;
    height: auto;
}

div{
    width:70%;
    height:auto;
    float: left;
}