在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>

这将在屏幕上创建一条红线，但内容将仅位于中心区域。到目前为止效果很好。但是我希望整个内容位于800 so宽的区域，所以我添加了一个容器：

#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。第二个版本是我真正想要的，只是它创建了一个垂直滚动条。第三个类似于Robert的解决方案，唯一的问题是它将div从流中移出，我想避免像在下面的元素中添加一个边距顶这样的问题，因为我事先不知道注释的长度。

Answer 1

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

这里有个小摆设：http://jsfiddle.net/ySVZb/

请注意，我更改了一些宽度，以便在jsfiddle屏幕上更容易看到，但大小是无关的。还请注意，由于我在正常流之外使用了note，所以您需要为后面的任何内容添加适当的页边距，否则它将落后于note。有些通用的如.note + * {margin-top: 2em}在某些情况下可以工作，但它将覆盖该元素上的任何边距顶部，在这些情况下，您需要一个更具体的修复，比如.note + p {margin-top: 3em;} jsfiddle，在这里显示：http://jsfiddle.net/ySVZb/1/