如何让一个元素离开它的父亲

Question

我有一个宽度为960px的容器中的右浮动div，我希望它具有更大的宽度但不允许滚动显示，这里有一张图片：

它具有标题“从杂志”粉红色的盒子

Answer 1

在这里，你有一个工作的例子：http://jsfiddle.net/QBmKm/。它采用overflow: hidden;

<div class="container"> 
    ceva 
</div> 

<div class="wrapper"> 
    <div class="container"> 
     <div class="left"> 
      left 
     </div> 
     <div class="right"> 
      <div class="box"> 
       ceva 
      </div> 
     </div> 
     <br style="clear: both;"> 
    </div> 
</div> 

<div class="container"> 
    ceva 
</div> 

和CSS是

.container { 
    width: 400px; 
    margin: auto; 
    background: gray; 
    padding: 10px 0; 
    margin-bottom: 30px; 
} 
.left { 
    float: left; 
    width: 200px; 
} 
.right { 
    float: left; 
    width: 200px; 
} 
.box { 
    width: 9999px; 
    background: red; 
    padding: 50px 0; 
} 
.wrapper { 
    overflow: hidden; 
} 

Answer 2

所有我想说的是，首先是非常好的设计:-) 现在作为我假设

yy。y您可以同时使用

`position:absolute` 

为实现这一目标，这将工作

Answer 3

关闭容器，创造您想要有不同的设置，并再次打开容器底部的排一个新的div。

Answer 4

如果你想要一个元素显示在它的父元素之外，你需要使用负号margin。

<div> 
    <div id="outercontainer"> 
    <div id="biggerelement"> 
     asdfasdfasdfasdf 
    </div> 
    </div> 
</div> 

与CSS：

#outercontainer { 
    width: 500px; 
    margin-left: auto; 
    margin-right: auto; //center the outer container 
    border: 1px solid blue; //just to show it 
} 

#biggerelement { 
    margin-left: -50px; //The element will start 50 pixels left from it's parent element 
    margin-top: 5px; //...and 5 pixels below the edge of it's parent 
    border: 1px dotted yellow; 
}