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

希望我正确理解你的意思，我从来没有听说过“jello”布局......

注意：如果您的整个布局已经被父元素约束到某个宽度，那么您将无法使其仅适用于一个子元素。您可能需要重新设计布局。