具有不同边距颜色和居中内容的网页答案

【问题标题】：Web page with different margin colors and centered content具有不同边距颜色和居中内容的网页
【发布时间】：2012-06-24 21:10:22
【问题描述】：

我想构建一个页面，其中我的内容居中但响应迅速 - 它的最大宽度应为 960 像素，但如果窗口大小减小，它会减小。同时，我想让这个页面的背景在它的左右边距上有不同的颜色。我怎样才能做到这一点？如果我在主 div 上使用 margin:0 auto，我将无法再控制背景。

【问题讨论】：

标签： css html

【解决方案1】：

http://jsfiddle.net/iambriansreed/Sw9ae/

HTML

<div class="left"></div>
<div class="right"></div>
<div class="centered">centered</div>

CSS

.left,.right {
    position: absolute;
    width: 100px;
    top: 0;
    bottom: 0;
}
.left {
    left: 0;
    background: blue;
}
.right {
    right: 0;
    background: red;
}
.centered {
    position: relative;
    margin: 0 auto;
    max-width: 400px;
    background: #ccc;
}

【讨论】：

【解决方案2】：

对于你将拥有的内容

<div id="page">
  <div id="content"></div>
</div>

如果你把你的css文件放进去

page { 
  width: 100%;
  background: #333; }

content {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto; }

对于背景颜色，您可以尝试一些这样的技巧（这些将适用于内容）

border-right: 10px solid #blue;
border-left: 10px solid #white;

【讨论】：

【解决方案3】：

只要让它有一个max-width 和一个百分比宽度，两边都有自动边距。如果你想要一个多色的身体背景，你可以在背景上放置两个盒子，并给每个盒子一个不同的颜色。例如，现在将它们放置在背景上，例如负 z-index，以便其余部分留在视口上。在这里，我为你做的：

来源：http://jsfiddle.net/p8ZNz/4/

全屏查看：http://jsfiddle.net/p8ZNz/4/embedded/result/

CSS：

#left{
width:50%;
height:100px;
position:absolute;
top:0;
left:0;
background-color:red;
z-index:-1;
}   
#right{
width:50%;
height:100px;
position:absolute;
top:0;
left:50%;
background-color:blue;
z-index:-1;
}
#content{
position:relative;
width:90%;
height:100px;
max-width:960px;
margin:0px auto;
background-color:green;
color:#FFF;
}

所有宽度的背景都将保持 50%-50%，如果您调整窗口大小，居中的框会变大，直到达到 960 像素宽。如果你想让背景完整，就给它一个 100% 的高度！

【讨论】：