内嵌块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排成一行。