全寬子div的背景顏色

我試圖設置一個背景顏色的div被拉伸（使用負邊距）到其最外層父div的全部寬度。全寬子div的背景顏色

Here's一個簡化的例子：http://jsfiddle.net/U5dnd/

白色DIV .featured-wrapper覆蓋黑色DIV .site的全寬，但其背景顏色doesn't。我想邊際是透明的。

有沒有辦法讓整個.featured-wrapper白色，包括其（負）邊距？（或者有另外一種方法可以實現這個目標嗎？）

謝謝！

來源

2012-09-25 Mattvic

我沒有正確理解你，但是你想要的是http://jsfiddle.net/swamimayank/5JH6w/？ –

從視覺上來說，我想讓示例中的白色小孩div覆蓋整個黑色背景，從左到右。 – Mattvic

.featured-wrapper { 
    background-color: white; 
    height:50px; 
    margin: 20px 0px 0 0px; 
    position:absolute; 
    width:100%; 
    z-index:100; 
    left:0; 
}

來源

2012-09-25 15:26:54

謝謝，這在JSfiddle中很好用，儘管它在我的模板中導致了一些其他的令人頭疼的問題;）似乎絕對定位是要走的路，所以我會走這條路。 – Mattvic

入住這

JS Fiddle

CSS：

.site { 
    background-color:black;  
    padding: 0 40px; 
    height:300px; 
    width:320px; 
} 
.site-content { 
    width:100%; 
    overflow:hidden; 
} 
.wrapper { 
    overflow:hidden; 
    background-color:red; 
    height:100%; 
} 
.featured-wrapper { 
    background-color: white; 
    height:50px; 
    margin: 20px 0 0 -40px; 
    position: absolute; 
    width: 399px; 
}

HTML：

<div id="page" class="site"> 

    <div id="main" class="wrapper"> 

     <div id="primary" class="site-content"> 
      <div class="featured-wrapper"> 
       <p>This is the featured wrapper</p> 
      </div> 
    </div> 
    </div> 

</div>

來源

2012-09-25 15:39:34 Narendra

如果需要更改，請告知我。 – Narendra

全寬子div的背景顏色

回答

相關問題