css - 在 "jello"布局中扩展元素的一部分 - CSS

Question

我已将所有主要内容放在一个 div 中以限制所有元素的大小。我想很多流行的网站都遵循这种方法。但是，我想扩展导航栏的背景以将 100% 扩展到窗口的末端。例如，我还在 CNN.com 等热门网站上看到过这样做(即红色导航栏和标题扩展 100%，而所有内容都受到限制，导航栏和标题仍然与其余受限制的内容对齐)下面是一个屏幕截图。我该如何复制它？

#allcontent {
    width: 900px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

这很简单，您只有一个宽度为 100% 的 div，带有背景，以及其中的另一个以固定宽度或最大宽度居中的 div。示例:

<div id="allcontent">
    <div class="content">
        <p>Your content here.</p>
    </div>
</div>

#allcontent {
    background:#CCC;
}
.content {
    width:900px;
    margin:0 auto;
}

这是一个带有页眉和页脚的演示:http://jsfiddle.net/Qq6nM/2/

希望我没有理解你的意思，我以前从未听说过“果冻”布局...

注意:如果您的整个布局已经被父元素限制在一定宽度，您将很难让它只对一个子元素起作用。您可能需要重新设计布局。