css - 将 div 包裹在圆形背景元素周围

Question

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

见：http: //i.imgur.com/ZlV2gre.png

我需要一些帮助来围绕该圆形元素包装文本，但也要将文本保持在蓝色区域内。

任何帮助将非常感激！

Answer 1

为每个重叠的文本行浮动一个 div

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

然后文本将自动环绕浮动 div。使用反复试验来确定每个浮动 div 的最佳宽度。

JSFiddle 演示。

这是演示的修改版本，更清楚地说明了 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/ 对我有用。

祝你好运！