css - 覆盖 div 的页面宽度

Question

我的页面设置为所有元素都包含在 640 像素的页面宽度(移动站点)中，如下所示:

html, body {
    width: 640px;
    padding: 25px;
    margin-left: auto;
    margin-right: auto;
}

所有元素的两边边距相同，内边距为 25px。这行得通，但我有一个元素，我想跨越页面的整个宽度，因此否决了所有元素必须以 640px 的宽度居中的事实。

可能我正在采取艰难的方式，也许我应该更改我页面上的其他内容，以更好地使所有元素在 640 像素宽度内对齐。想法？

Answer 1

在我的生活中，我已经用全 Angular 标题和背景图像做了很多次，我发现最干净的解决方案是根据文档中的内容将父元素分开( header、content 等)，保持它们的全宽，并将包含内容的子元素包装在一个容器中。例如:

<header>
    <div class='headerWrap'>
        <!-- some content -->
    </div>
</header>

<section class='backgroundImage'>
</section>

<section class='content'>
    <div class='contentWrap'>
        <!-- some content -->
    </div>
</section>

然后这样设置样式:

header {
    width: 100%;
    background: #00cae9;
}

.headerWrap {
    width: 1000px;
    height: 40px;
    margin: 0 auto;
}

.backgroundImage {
    background: url('images/myimage');
    /* other styles */
    width: 100%;
    height: 120px;
}

.content {
    width: 100%;
    background: #f9f9f9;
}

.contentWrap {
    width: 1000px;
    margin: 0 auto;
}