3

我div在另一个里面有几个 s div（我们称之为容器），我想知道是否可以将孩子的宽度扩展div到容器的宽度之外div。

如果您可以看一下这个jsfiddle会更容易解释。

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

我将如何实现这一目标？顺便说一句，我之所以要这样做是因为我使用了由此提供的网格结构，并且它要求必须将所有内容都包含在容器div中才能获得结构提供的功能。

编辑：我刚刚意识到容器的宽度div是在 px 中指定的，而不是在 jsfiddle 示例中的 % 中。所以将子元素的宽度设置div为 120% 并不能保证水平填充页面。我应该如何解决我的问题？我现在能想到的唯一方法是以像素为单位的屏幕宽度，但我认为这在 CSS 中是不可能的。

4

5 回答 5

6

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

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

见小提琴。

为什么不能#greendiv在 the.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;
}

见小提琴。

于 2013-04-19T11:02:01.947 回答
4

如果父容器居中对齐，则可以在左右两侧使用负边距：

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

在这里看小提琴 - http://jsfiddle.net/CtsTQ/12/

于 2013-04-19T11:06:51.150 回答
2

添加overflow:visible到您的父 div，即.container.

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

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

现场演示

于 2013-04-19T10:59:37.510 回答
2

好吧，我通过这样做得到了您的要求：

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

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

于 2013-04-19T11:02:26.823 回答
0

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

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

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

于 2013-04-19T11:08:32.207 回答