div周围浮动的文本

Question

Im trying to make text flowing around the image, in a different scenario. the image wont be inside the content. Image would be a seperate component and the div with text will be a seperate component. So markup will look like this

<img class="imgtofloat" src="images/1.png" alt="" />
<div class="divwithcontent">
 <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>

The scenario is that we cant change the markup but we need to position the image between the content and make the content float around it.

EDIT 1: I need the image to be in the center of the content as it is in this image https://www.flickr.com/photos/41695354@N08/14477076543/

Answer 1

We can stretch our CSS imagination. Hide the image and replace it with background.

Example, possibly adaptable.

Have a fiddle!

CSS

img {
    display: none;
}
p:first-child:after {
    content: "";
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    background: url(http://www.placehold.it/100) no-repeat;
    margin: 20px;
}

Answer 2

If you can Change the image placement. step 1) put image in between the paragraph text. step 2) and one attribute in img tag align="left"

Answer 3

如果您只有一些CSS规则，也可以使用内联样式。

<img src="images/1.png" alt="" style="float: left" />