如何在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  |
+--------------------------+

你可以在我的着陆页面上看到我试图实现这一点，例如在标题为“Liebe I'm Mittelpunkt”的框中。链接：https://MeineNeueLiebe.de

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

- Peter Lairo

---

目前为止，在实际浏览器支持下，您无法使用CSS完成这个功能。CSS排除和CSS形状即将推出，但现在还不行！- http://dev.w3.org/csswg/css-exclusions/ - http://www.vanseodesign.com/css/shapes-module/ - Paulie_D

你可以使用带有 float 属性的 div 元素，使文本环绕其周围，然后在图像上放置 position: absolute; 属性，以将其定位在您首先创建的 div 元素之上。 - Noah Wetjen

@NoahWetjen 你无法像你描述的那样使文本环绕浮动。 - Paulie_D

请阅读此链接 - http://www.interoperabilitybridges.com/css3-floats/originalsubmition.html - 这将回答你所有的问题。- @PeterLairo - Nitesh

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/
评论：右侧的负边距会增加父块的总宽度。随着您缩小浏览器窗口，当图像的右边缘接触窗口的右边缘时，将出现水平滚动条。

- Marc Audet

---

有趣，但它是动态/响应式的，还是仅因为当前使用的特定尺寸而起作用？“诚实的问题”... - Paulie_D

我本可以使用相对尺寸，如 width: 50%，它仍然会以同样的方式运作。很难说这在响应式布局中能否良好地集成，这取决于页面上还有什么其他内容。 - Marc Audet

使其工作的两个因素是：（1）容器中的overflow: visible;，以及（2）负右边距。感谢您快速而出色的帮助！顺便说一句：您能否将overflow: visible;部分添加到您其他答案中，以便整个正确答案只在一个答案中。然后我会将您的完整答案标记为“已接受”。谢谢。 - Peter Lairo

@PeterLairo 已更新答案并附上评论，很高兴能帮到你，欢迎来到 SO！ - Marc Audet

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，那么我认为您可能会很遗憾。

- Turnip

---

文本只会包裹在顶部或底部...不会同时出现（据我所知），这是必需的。 - Paulie_D

确实...这也是我在原始问题上发表评论的原因。如果可以使用CSS（模拟打印布局），我们早就做到了。 :) - Paulie_D

Answer 3

演示

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>

- 4dgaurav