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>

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

摘要

这就是我想要实现的目标（前方时髦的ASCII艺术）

HTML：

CSS代码：

3 个答案: