border - 在 wrap 外扩展 div 边框？

Question

Here is my site

目前仍在摆弄设计布局，有一个我无法完全解决的问题。
在我的标题上，我有一个红色边框底部将它与主要内容分开。同样，在页脚上我有一个红色的顶部边框来做同样的事情。有没有办法将边界扩展到 div 之外(因此在包装器之外，溢出可见)而不与其他元素发生冲突？我想配置布局，使其具有更多类似网格的设计。

#wrap {
width: 1000px;
background-color: #ffffff;
text-align:left;
margin: 0 auto 0 auto;
border-left: 1px solid #000000;
border-right: 1px solid #000000; }

#head{
background-color: #ffffff;
width: 1000px;
height: 159px;
border-bottom: 1px solid #ff0000; }

有点像 this ?

Answer 1

是的。您可以设置负边距，使 div 延伸到其父级之外，like this . (我只做了标题，但你明白了)

fiddle 中的解决方案使用烦人的 !important 来获得正确的样式 - 您可能想要重新组织 CSS 来解决这个问题并使您的代码更易于维护，请参阅 this post .