将 div 包裹在圆形背景元素周围答案

【问题标题】：Wrapping div around circular background element [closed]将 div 包裹在圆形背景元素周围
【发布时间】：2013-04-14 16:45:44
【问题描述】：

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

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

我需要一些帮助，将文本环绕在该圆形元素周围，同时将文本保持在蓝色区域内。

任何帮助将不胜感激！

【问题讨论】：

到目前为止您尝试过什么？你有任何示例代码吗？这可能会有所帮助csstextwrap.com/examples.php

标签： css html word-wrap

【解决方案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;
}

【讨论】：

【解决方案2】：

你想要的那种包装可以通过 jQuery 来完成。

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

祝你好运！

【讨论】：