如何扩展子div的宽度超出父div的宽度？

Question

我有几个div里面是另一个s div(让我们称之为集装箱),我想知道是否可以延长孩子的宽度div要超越容器的宽度div.

如果你能看看这个jsfiddle,你会更容易解释.

目前,容器div的宽度为80%,所有孩子div的宽度也是如此.我想将第一个的宽度扩展div到100%,以便它完全填充页面水平.

我怎么做到这一点？顺便说一下,我想这样做的原因是因为我使用了由此提供的网格结构,并且它要求必须将eveything包含在容器div内以获得结构提供的功能.

编辑:我刚刚意识到容器的宽度div是在px中指定的,而不是像在jsfiddle示例中那样在%中指定.因此,将子项的宽度设置div为120%并不能保证水平填充页面.我该如何处理我的问题？我现在能想到的唯一方法就是在px中获得屏幕的宽度,但我不认为在CSS中这是可能的.

Answer 1

我不会这样做,但它似乎工作:

#greendiv {
  width:120%;
  margin-left:-10%;
  background-color: green;
}

看小提琴.

为什么不能#greendiv是之前的.container还是一些其他的包装div？

编辑.让你思考颠倒(不是真的,只是在一个强制容器内部创建一个自定义容器,这里的.yellowdivs是自定义容器,而且#greendiv是容器内的全宽容器):

.container {
  width: 100%;//or some amount of pixels and the yellow divs follow that setting
  margin: 0px auto;
}

.yellowdiv {
  width:80%;
  margin-left:10%;
  border: solid 1px;
  background-color: yellow;
}
#greendiv {
  background-color: green;
}

看小提琴.