如何在 CSS 中覆盖父容器的宽度属性

Question

我无法在我的 CSS 中覆盖父级的宽度。本质上，我有一个父级和一个子级 div，例如：

.parent{ width: 768px; background-color: red; }
.child{ background-color:blue; }

<div class="parent">
    <div class="child">
        //content
    </div>
</div>

很多元素仍然使用 768px 宽度的 parent 参数，但是我希望这个特定的子元素扩展屏幕的整个宽度 - 我尝试过 left: 0, right: 0，清除浮动并将宽度设置为汽车。如果可以，我也想避免使用 !important。

有什么建议 ？

我想要的准确表示如下所示：

   _____   
  |par. |
 _|_____|_
| child   |
|         |
|_________|
  |     |
  |_____|

Answer 1

这样做，使用填充和边距（左边距和右边距和左边距和右边距）来实现这一点。

<div class="parent">
  <p>This is parent</p>
  <div class="child">
    <p>This is child</p>
  </div>
  <p>This is still parent</p>
</div>

.parent{ width: 468px; background-color: red; margin: 0 auto; }
.child{
  background: blue;
  margin-left: -300vw;
  padding-left: 300vw;
  margin-right: -300vw;
  padding-right: 300vw;
}

http://cssdeck.com/labs/full/6xljy6pz