将背景水平扩展到 div 之外

Question

我有一些css：

.note {
  background: red;
}
.note > div {
  max-width: 780px;
  margin: 0px auto;
  position: relative;
  padding-left: 20px;
  border: 1px solid black;
}
.note > div:before {
  content: '⚠';
  position: absolute;
  left: 0px;
}

以及相应的 html，如下所示：

<div class='note'><div>Foobar</div></div>

这会在屏幕上创建一条红线，但内容将仅在中心区域。到目前为止，它运行良好。但是我希望整个内容都在 800px 宽的区域内，所以我添加一个容器：

#container {
  max-width: 790px;
  margin: 0 auto;
  background: green;
  border-radius: 10px;
  padding: 5px;
}

还有一些 html：

<div id='container'>
  <p>Lorem ipsum</p>
  <div class="note"><div>foo</div></div>
  <p>Foobar</p>
</div>

当然，注释在这里不起作用(红线不会超出绿色容器(。我一直在试图想出一些东西，但我做不到。 我不能只是关闭容器，放置我的笔记，然后打开另一个，因为边框半径和(还有框阴影，但我从示例中省略了它(会中断。对.note使用负边距也不起作用，因为它会添加水平滚动条。我可以做.note position: absolute;，但是我的笔记会与它之后的任何内容重叠。

任何想法如何解决？

更新：这是一个JSFiddle。第二个版本是我真正想要的，除了它创建了一个垂直滚动条。第三个就像罗伯特的解决方案，唯一的问题是它使div脱离了流动，我想避免像在以下元素中添加边距顶部这样的黑客，因为我事先不知道笔记的长度。

Answer 1

.note {
  background: red;
    position: absolute;
    left:0;
    right:0;
}

这是一个jsfiddle：

http：//jsfiddle.net/ySVZb/

请注意，我更改了一些宽度，以便在 jsfiddle 屏幕中更容易看到，但大小无关紧要。 另请注意，因为我在正常流程之外使用了音符div，因此您需要为后面的任何内容添加适当的边距，否则它将落后于音符div。 一些像 .note + * {margin-top: 2em} 这样的通用函数在某些情况下会起作用，但它会覆盖该元素上已有的任何边距顶部，在这些情况下，您需要更具体的修复.note + p {margin-top: 3em;}例如 jsfiddle 在此处显示：http://jsfiddle.net/ySVZb/1/