Question

我在另一个div内有几个div（我们称之为容器）我想知道是否可以将子div的宽度扩展到超出宽度容器div。

更容易解释一下，如果你能看一下这个jsfiddle。

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

我将如何实现这一目标？顺便说一下，我想这样做的原因是因为我使用this提供的网格结构，并且它要求必须将eveything包含在容器div中才能获得结构提供的功能

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

Answer 1

我不会这样做，但似乎有效：

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

请参阅Fiddle。

为什么#greendiv不能在.container或其他包装div之前？

编辑。让你思考颠倒（不是真的，只是在强制容器中创建一个自定义容器，这里.yellowdiv是自定义容器，#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;
}

请参阅Fiddle。

Answer 2

如果父容器是中心对齐的，则可以在左侧和右侧使用负边距：

#greendiv {
    background-color: green;
    margin: 0 -12.5%;
}

请参阅此处的小提琴 - http://jsfiddle.net/CtsTQ/12/

Answer 3

将overflow:visible添加到您的父div .container。

.container {
    width: 80%;
    margin: 0px auto;
    overflow:visible;
}

#greendiv {
    background-color: green;
    width:500px;
}

LIVE DEMO

Answer 4

通过这样做我得到了你所要求的：

#greendiv {
   background-color: green;
   width: 140%;
   margin-left: -20%;
}

但我认为这不是一个好习惯......

Answer 5

将内容扩展到包装容器之外通常不是一个好主意，但如果我必须这样做，我肯定会使用这样的相对定位。

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

您还可以使用px等其他单位来获得更精确的结果。

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

5 个答案: