如何讓一個元素離開它的父親

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