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

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

3 个答案: