包裹在圆形背景元素周围的div [英] Wrapping div around circular background element

问题描述

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

I have a text area within a background image that is partially obscured by a circular object.

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

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

I'd like some help wrapping text around that circular element, but also keeping the text within the blue area.

任何帮助将非常感激！

推荐答案

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

最简单的选项是使用@ Vector的建议和浮动几个不同宽度的div向左。每个浮动div应与文本的 line-height 具有相同的 height ，并且应足够宽

Float a div for each overlapping row of text

The simplest option is to use @Vector's suggestion and float several divs of different widths to the left. Each floated div should have the same height as the line-height of the text, and should be wide enough to match the overlapping part of the circle.

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

The text will then automatically wrap around the floated divs. Use trial and error to determine the best width for each floated div.

JSFiddle Demo 。

这里有一个改动版本的演示，更清楚地说明了div是如何浮动的。

And here's an altered version of the demo that illustrates more clearly how the divs are floated. This should work fine in all browsers.

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

这篇关于包裹在圆形背景元素周围的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！