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

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>

我希望页面如下图所示： 目前页面的显示效果如下图所示：

- scottvw

---

你使用的是哪个浏览器？你的代码在 jsfiddle 上对我有效 - https://jsfiddle.net/0zf7rxpn/ - messerbill

Chrome，尽管我在其他地方也遇到了同样的问题，但当我应用“margin-top: -50px”时，它会切入到右侧的文本中。 - scottvw

Answer 1

希望这有所帮助。

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

简而言之，我给蓝色元素设置了负的margin-bottom，使得红色元素上移。然后给红色元素添加了一些margin-right、position: relative和负的right属性。

- Jakub Rożek

---

啊哈！我完全从错误的角度来看这个问题。有时候最显然的解决方案就在你面前。 - scottvw