如何將文本圍繞堆疊元素（即具有負邊距的元素）進行環繞？

我想環繞多個文本堆疊浮動元素，但是當我加入陰性切緣的第二個元素中的文本不打球（見下文）...

有沒有人有一個解決方案這可以幫助我呢？

在此先感謝！

我所做至今這裏：

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

我會怎樣想的頁面看起來

頁面的外觀，因爲它是

來源

2016-04-29 scottvw

你使用什麼瀏覽器？你的代碼適用於jsfiddle - https://jsfiddle.net/0zf7rxpn/ – messerbill

Chrome，儘管我在其他地方也遇到同樣的問題，我應用了「margin-top：-50px」，它將文本切入右邊手邊 – scottvw

希望這有助於。

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

總之，我把負邊距底部放到藍色元素，所以紅色元素上升。然後對紅色的元素，我給了一些保證金，權利，位置：相對和負面的權利。

來源

2016-04-29 17:18:22

啊哈！我在完全錯誤地看待這個問題。有時候，最明顯的解決方案就在你身邊 – scottvw

如何將文本圍繞堆疊元素（即具有負邊距的元素）進行環繞？

回答

相關問題