2016-04-29 79 views
7

我希望有人能帮助我。如何将文本围绕堆叠元素(即具有负边距的元素)进行环绕?

我想环绕多个文本堆叠浮动元素,但是当我加入阴性切缘的第二个元素中的文本不打球(见下文)...

有没有人有一个解决方案这可以帮助我呢?

在此先感谢!

我所做至今这里:

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

我会怎样想的页面看起来 How I would like the page to look

页面的外观,因为它是 How the page looks as it is

+0

你使用什么浏览器?你的代码适用于jsfiddle - https://jsfiddle.net/0zf7rxpn/ – messerbill

+0

Chrome,尽管我在其他地方也遇到同样的问题,我应用了“margin-top:-50px”,它将文本切入右边手边 – scottvw

回答

4

希望这有助于。

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

总之,我把负边距底部放到蓝色元素,所以红色元素上升。然后对红色的元素,我给了一些保证金,权利,位置:相对和负面的权利。

+0

啊哈!我在完全错误地看待这个问题。有时候,最明显的解决方案就在你身边 – scottvw