html - 如何在 div 上重叠图像，但仍将文本环绕在图像周围？

Question

总结

我在德国 ( https://MeineNeueLiebe.de ) 拥有一个在线约会网站的初创公司，但我试图让一个图像溢出其包含的 div 但文本仍在 div 中，这让我感到难过围绕仍在 div 内的图像部分流动。

这就是我想要实现的目标(前面是时髦的 ASCII 艺术)

+---- 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 代码:

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

在 float 元素上使用负右边距，它会突出到 父容器。

参见演示:http://jsfiddle.net/audetwebdesign/ckkrU/

评论:右边的负边距具有增加父 block 整体宽度的效果。当您缩小浏览器窗口时，当图像的右边缘接触到窗口的右边缘时，您会看到水平条出现。