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想象力。隐藏图像并将其替换为背景。

示例，可能适应性强。

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

如果可以更改图像位置。步骤1）将图像放在段落文本之间。步骤2）和img标签中的一个属性align =＆＃34; left＆＃34;

Answer 3

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

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

漂浮在div周围的文字

3 个答案: