div周围浮动的文本

Question

我试图在不同的情况下使文本在图像周围流动。 图像不会在内容中。 图像将是一个单独的组件，带有文本的div将是一个单独的组件。 所以标记看起来像这样

<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>

场景是我们无法更改标记，但是我们需要将图像放置在内容之间，并使内容在其周围浮动。

编辑1： 我需要图像位于内容的中心，因为它在此图像中https://www.flickr.com/photos/41695354@N08/14477076543/

Answer 1

我们可以扩展CSS的想象力。 隐藏图像并将其替换为背景。

例如，可能适应。

小提琴！

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

如果可以，请更改图像位置。 步骤1）将图片放在段落文字之间。 第2步）和img标签中的一个属性align =“ left”

Answer 3

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

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