如何将文本环绕堆叠元素（即具有负边距的元素）？

Question

我希望有人能帮助我。

我想将文本环绕在多个堆叠的浮动元素周围，但是当我向第二个元素添加负边距时，文本不正常（见下文）...

有没有人有解决方案可以帮助我解决这个问题？

提前致谢！

到目前为止我在这里做了什么：

<style>
.elements {
    float:left;
    padding:10px;
    width:50%;
    background:#039;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    color:#fff;
    padding:50px;
    box-sizing:border-box;
    margin-right: 20px;
    position: relative;
}

#element-two {
    margin-top:-50px;
    background:#900;
    margin-left:30px;
}
</style>


<div id="post">
<div id="element-one" class="elements">Element 1</div>
<div id="element-two" class="elements">Element 2</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id dictum odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus vitae leo dictum, <br>
<br>
<br>
porttitor augue ut, accumsan nunc. Phasellus at malesuada orci, quis varius nulla. Nullam dui purus, elementum non fermentum eu, 
laoreet ac massa. Maecenas dictum elit sit amet mi pretium tincidunt. Maecenas interdum elementum lectus, eu aliquam nibh lacinia nec. 
<br><br><br>
Quisque facilisis accumsan blandit. Mauris eget pulvinar lacus. Donec pretium posuere mattis. Suspendisse et tempor orci, sit amet placerat neque. Etiam laoreet massa eu libero posuere, sit amet laoreet metus auctor.

</div>

我希望页面看起来如何

页面的实际情况

Answer 1

希望这对您有所帮助。

 `https://jsfiddle.net/0zf7rxpn/1/`

总之，我把负的margin-bottom放到了蓝色元素上，所以红色元素就上去了。然后对红色元素我给了一些 margin-right, position: relative 和 negative right.

如何将文本环绕堆叠元素（即具有负边距的元素）？

How can I wrap text around stacked elements (ie elements with negative margins)?

html

javascript

css

jquery

margin