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

背景元素位于具有填充的元素内部，这意味着如果你做某种＆＃34; cheesy＆＃34;它只能扩展整个宽度。将其扩展到其父元素之外的方法（宽度> 100％等）。

你的负边距不会修复宽度，因为它只是移动 div，而不是放大它。如果宽度为100％且父级具有填充，则永远不会完全覆盖其父级宽度。

请看这个小提琴：https://jsfiddle.net/uumkjLy8/6/

我已从.main-class移除了填充，以及.background上的负边距。

Answer 2

从box sizing

中删除.background

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

Answer 3

我认为你不需要在.background类中填充：-20px。此外，添加一个填充：20px到.content类，以便与.background对齐

Answer 4

这可以直截了当：

.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 ...
在这种情况下说明你的问题。

内联块css无法使元素全宽

4 个答案: