如何在 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;
}

在浮动元素上使用负的右边距，它将突出到 父容器。

查看演示：http://jsfiddle.net/audetwebdesign/ckkrU/

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

Answer 2

将.LP-TextBoxes的溢出设置为visible，并使图像包装的宽度小于图像的宽度。插入一个宽度为零的虚拟元素.fake_float，以在不改变文本流的情况下将图像包装向下推：

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>