html - 如何在应用填充后将背景颜色拉伸(stretch)为父容器的宽度-CSS

Question

我正在尝试解决一个填充问题，我将填充应用于他的父容器，如下所示: CSS:

   .main {
  width: 100px;
  border: 1px solid #000;
  background-color: #b0bfc6;
  height: 300px;
  padding: 20px
}

.m1 {
  color: #000;
  background-color: #fff;
  margin-top:20px;
}

.m2 {
  color: #000;
  background-color: #fff;
  margin-top:20px;
}

我的 html:

<div class="main">
 <div class="m1">some content
 </div>
 <div class="m2">some content

 </div>
</div>

问题是当我将填充应用于“主”类 div 时，选择背景会被填充并显示在 fiddle 中:

http://jsfiddle.net/btjpk5f0/7/

有没有一种方法可以将填充应用到父容器，但仍然能够将选定的背景颜色拉伸(stretch)为容器的整个宽度？

谢谢!

Answer 1

负边距可能会有所帮助。

.main > div {
  margin-left:-20px;
  margin-right:-20px;
}

http://jsfiddle.net/btjpk5f0/5/

[编辑:] 你不能在不扩大 div 的情况下拉伸(stretch)背景，但你可以向内部元素添加相同的填充:

.main > div {
  margin-left:-20px;
  margin-right:-20px;
  padding-left:20px;
  padding-right:20px;
}

看这里:http://jsfiddle.net/btjpk5f0/11/