0

我有一些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也不起作用，因为它会添加水平滚动条。我可以做.note position: absolute;，但我的笔记会与后面的内容重叠。

任何想法我该如何解决？

更新：这是一个JSFiddle。第二个版本是我真正想要的，除了它创建了一个垂直滚动条。第三个就像罗伯特的解决方案，唯一的问题是它使 div 失去了流动性，我想避免像在下面的元素中添加 margin-top 这样的黑客攻击，因为我不知道注释的长度提前。

4

1 回答 1

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

这是一个jsfiddle：http: //jsfiddle.net/ySVZb/

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

于 2013-06-06T23:01:12.963 回答