环绕div圆形背景元素

Question

我在背景图片中有一个文本区域，该区域被圆形对象部分遮挡。

请参阅：http://i.imgur.com/ZlV2gre.png

我想帮助在圆形元素周围包装文本，但也要将文本保留在蓝色区域内。

非常感谢任何帮助！

Answer 1

为每个重叠的文本行

浮动一个div

最简单的选择是使用@ Vector的建议并向左浮动几个不同宽度的div。每个浮动div应与文本的height具有相同的line-height，并且应足够宽以匹配圆的重叠部分。

然后，文本将自动环绕浮动的div。使用试错法确定每个浮动div的最佳宽度。

JSFiddle Demo

这是演示的altered version，更清楚地说明了div是如何浮动的。这应该适用于所有浏览器。

<强> HTML

<div class="content">
    <!-- As many floated elements as needed -->
    <div class="float1"></div>
    <div class="float2"></div>
    ...
    <p>Text goes here</p>
</div>

<强> CSS

.content div {
    float: left;
    clear: left;
    height: 24px;
}
.content div.float1 { width: ...; }
.content div.float2 { width: ...; }
...
.content p {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
}

Answer 2

你想要的包装类型可以通过jQuery完成。

这个插件：http://www.jwf.us/projects/jQSlickWrap/对我有用。

祝你好运！