Wrapping div around circular background element [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 6 years ago.

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

See: 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.

Any help would be much appreciated!

回答1:

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.

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.

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

回答2:

The kind of wrap that you want can be done through jQuery.

This plugin: http://www.jwf.us/projects/jQSlickWrap/ has worked for me.

Good luck!

来源：https://stackoverflow.com/questions/16001550/wrapping-div-around-circular-background-element