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

Question

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

Answer 1

对于您将拥有的内容

<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;

Answer 2

只需让它有一个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%，如果调整窗口大小，居中的框会变大，直到达到 960px 宽。如果你想让背景完整，只要给它一个 100% 的高度！

Answer 3

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;
}​