如何在div上叠加图像，但仍然在图像周围换行文字？

Question

Summary

我在德国拥有一个初创的在线交友网站（https://MeineNeueLiebe.de），并且我被我的企图让一个图像溢出其包含的div而感到难过但仍然在div内部的文本流仍然在图像的部分内部DIV。

Here's what I'm trying to achieve (funky ASCII art ahead)

+---- div -----------------+
| bla bla bla bla bla bla  |
| bla bla bla +--------------------+
| bla bla bla |                    |
| bla bla bla |                    |
| bla bla bla |        image       |  <-- image overlaps div
| bla bla bla |                    |
| bla bla bla |                    |
| bla bla bla +---------------------
| bla bla bla bla bla bla  |
| bla bla bla bla bla bla  |  <-- text wraps around image
| bla bla bla bla bla bla  |
+--------------------------+

你可以在我的登陆页面https://MeineNeueLiebe.de上看到我想要实现的目的。在标题为“Liebe I'm Mittelpunkt”的方框中。

HTML:

<div class="widget_container LP-TextBoxes">
<h2>Liebe im Mittelpunkt</h2>
<div class="FP-image FP-image-heart"><img src="https://static.meineneueliebe.de/assets/images/FP-image-heart-star-150.png" alt="Liebe" /></div>
<p>Sie wollen sich auf Ihre Partnersuche konzentrieren und nicht auf die Bedienung komplexer Webseiten? Sie wollen trotzdem alle Funktionen, die eine moderne Partnervermittung zu bieten hat? Dann sind Sie bei <strong>MeineNeueLiebe.de</strong> genau richtig!</p>
</div>

CSS Code:

.LP-TextBoxes {
overflow: auto;
}

.FP-image {
display: block;
float: right;
padding-right: 10px;
}

.FP-image-heart {
width: 100px;
height: auto;
margin: 5px 10px 10px 20px;
}

Answer 1

这是使用负边距可能有效的一种方法。

请考虑以下HTML：

<div class="wrap">
    Lorem ipsum dolor sit amet... 
    <div class="image-panel">
        <img src="http://placekitten.com/300/200">
    </div>
    Sed sitamet erat augue. Morbi consectetur...
</div>

应用以下CSS：

.wrap {
    width: 300px;
    border: 1px dotted blue;
    overflow: visible; /* Make sure overflow is visible... */
}
.image-panel {
    float: right;
    margin: 10px -150px 10px 10px;
}

在浮动元素上使用负右边距，它将在父容器外部投影。

请参阅演示：http://jsfiddle.net/audetwebdesign/ckkrU/

注释：右边的负边距具有增加父块的总宽度的效果。缩小浏览器窗口时，当图像的右边缘与窗口的右边缘接触时，您将看到水平条。

Answer 2

将.LP-TextBoxes的溢出设置为visible，并使图像包装的宽度小于图像的宽度。插入一个虚拟元素.fake_float与零wodth推动图像包装下来而不改变文本的流量：

DEMO

.LP-TextBoxes {
    overflow: visible;
    background: lightGreen;
    width: 50%;
    padding: 15px;
}

.FP-image {
    display: block;
    float: right;
    padding-right: 10px;
    clear:right;
}

.FP-image-heart {
    width: 90px;
    height: auto;
    margin: 5px 10px 10px 20px;
}

.fake_float {
    float: right;
    width: 0px;
    height: 40px; /* adjust height to position image wrapper */
}

如果你的设计阻止使用overflow: visible，那么我认为你可能会失败

Answer 3

Demo

CSS

* {
    margin:0;
    padding:0;
}
p {
    padding:.625em 0;
    text-align:justify;
    line-height:20px;
}
#container {
    width:755px;
    margin:0 auto;
}
.col {
    width:365px;
    padding:0 5px;
    float:left;
}
.ColSpace {
    width:175px;
    height:300px;
    padding:5px;
    float:right;
}
.ColOut {
    width:350px;
    height:300px;
    padding:5px;
    float:left;
}
.ColOut span {
    width:350px;
    position:absolute;
    text-align:center;
    font-size:.9em;
    font-weight:bold;
}
img {
    border: 1px solid gray;
}

HTML

<div id="container">
    <div class="col">
        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text<span class="ColSpace"><span class="ColOut"><span><img src="http://www.google.com/think/images/google-trends_tools_sm.jpg" alt=""> The Google Trends. </span></span>
            </span>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
        <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    </div>
</div>