內嵌塊CSS無法使元素全寬

Question

我想讓一個類完全流血，但我不能。

下面是HTML：

<div class="main-class"> 
    <div class="background"> 
    <p>some info in the background</p> 
    </div> 
    <div class="content"> 
    <p>Some random content</p> 
    </div> 
</div> 

和css：

.main-class{ 
    padding: 20px; 
    width: 100%; 
    background-color: #fff; 
    display: inline-block; 
    box-sizing: border-box; 
} 
.background{ 
    margin: -20px; 
    background-color: #eee; 
    display: inline-block; // must use inline-block 
    width: 100%; 
    padding: 20px; 
    box-sizing: border-box; 
} 
.content{ 
    margin-top: 30px; 
} 

，這裏是一個演示：https://jsfiddle.net/uumkjLy8/1/

背景類必須是全出血與背景，但所看到的演示在右側有空白區域。

Answer 1

背景元素位於具有填充的元素的內部，這意味着如果您使用某種「cheesy」方法將其擴展到其父元素之外（寬度> 100％等），它只能擴展全寬度。 。

您的負邊距不會固定寬度，因爲它只是移動格，而不是放大它。如果寬度爲100％，並且具有填充的父級，則它將從永不完全覆蓋父級的寬度。

看到這個小提琴請：https://jsfiddle.net/uumkjLy8/6/

我已經移除.main-class填充，以及對你的.background負利潤。

Answer 2

從.background

https://jsfiddle.net/uumkjLy8/8/

Answer 3

刪除box sizing這可以是直截了當的：

.main-class { 
 
    background-color: #fff; 
 
} 
 
.content, 
 
.background { 
 
    padding: 20px; 
 
} 
 
.background { 
 
    background-color: #eee; 
 
}

<div class="main-class"> 
 
    <div class="background"> 
 
    <p>some info in the background</p> 
 
    </div> 
 
    <div class="content"> 
 
    <p>Some random content</p> 
 
    </div> 
 
</div>

...除非你不得不使用一些冗餘的CSS ..
在這種情況下，在你的問題。

Answer 4

我認爲你不需要填充：-20px在.background類。此外，添加一個填充：20px到.content類，以便與.background排成一行。