css - 如何正确地让孩子超过父母的宽度？

Question

我有一个父母（容器）和一个孩子（一个 h1 标头/块）。

.container {
    width: 1024px;
}
#h1 {
    width: 1024px;
    padding: 0 30px 0 30px;
    background-color: something;
}

问题是由于某种原因，它不是从父级向左延伸 30 像素，向右延伸 30 像素，而是向右延伸 60 像素。现在我只是设置了一个负的左边距 -30px 来把它拉回来，让它变平，但我想知道是否有更好/正确的方法来做到这一点？

这是发生了什么的图片：

这是我希望它看起来像的图片（并让它看起来像负边距）：

Answer 1

在这种情况下，负边距是唯一可行的方法（也是我认为可以使用的少数情况之一）。

您可以探索其他解决方案（例如，将红色 bg 设置为居中对齐的 bg 图像，然后将div's 设置为 ' 之外的内容填充h1），但实际上使用负边距并没有任何好处，实际上是长期它的可维护性较差。

正如已经建议的那样，您也可以使用定位来解决这个问题（参见下面的示例）。

HTML：

<div class="container">
    <p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
    <h1>testing, testing, 1 2 3</h1>
</div>

CSS：

.container {
    background: #f00;
    margin: 0 0 0 20px;
    padding: 100px 0;
    position: relative;
    width: 400px;
}

h1 {
    background: #00f;
    color: #fff;
    left: -20px;
    padding: 0 20px;
    position: absolute;
    width: 100%;
}

http://jsfiddle.net/d7KJ9/4/

不幸的是，虽然在之后添加内容h1似乎破坏了这种方法：

http://jsfiddle.net/d7KJ9/2/

此外，如果上述方法确实有效，它不一定比使用负边距更好（它实际上涉及更多 CSS）。

总之，只需使用负边距解决方案，如果使用得当，负边距不一定是坏事，只需在使用它们之前与自己推理（有没有更好的方法来完成你想要的？）

Answer 2

您可以使用position:relative然后left在#h1：

.container {
  width: 400px;
  height: 500px;
  background: red;
  margin: 0 auto;
}

#h1 {
  width: 400px;
  height: 40px;
  left: -30px;
  background: blue;
  padding: 0 30px;
  position: relative;
  top: 40px;
}

在JSBin中尝试一下

Answer 3

负边距完全没问题。或者，您可以使用绝对和相对定位更以编程方式定位。

CSS

.container {
  background: crimson;
  height: 600px;
  margin: 0 auto;
  width: 300px;
}

.header {
  background: purple;
  height: 100px;
  left: 0;
  margin: 60px auto;
  padding: 0 30px;
  position: absolute;
  right: 0;
  width: 360px;
}

HTML

<div class='container'>
  <div class='header'></div>
</div>

代码笔示例。