CSS：扩大宽度

Question

嘿。我正在为我的网站设计一个简单的“设计”/框，我想将宽度设置的比现在更多。它现在是980px，我想使它成为1150px，但是当我这样做时，我的边框不透明，变得奇怪，框转向右边（并且我希望它全部在中心）

以下是之前的内容： http://jsbin.com/obefo3

这里后：（宽1150px） http://jsbin.com/obefo3/2

我怎样才能解决这个问题？

Answer 1

您应该将clear-bg的宽度相应地更改为新的宽度。它应该是（1150 - 980）= 170像素更宽。从width: 1010px;去width: 1180px;

Answer 2

也许尝试一个稍微不同的结构......和你有更多一点的CSS比你更需要我相信：

<div id="clear-bg"> </div> 

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

，然后你的CSS可能看起来像

#clear-bg { width:1150px; margin:0px auto; opacity:0.1; background:#000000; height:500px; margin-top:50px; } 
#page{position:relative;height:450px;width:1100px;background:#000000; margin:0px auto; margin-top:-475px;} 

（并删除这些元素的其他声明...）

Answer 3

更改

#page { 
    width: 980px; 
    margin: -275px 0px 0px -490px; 
    ... 
} 

到

#page { 
    width: 1150px; 
    margin: -275px 0px 0px -575px; /* -1150/2 */ 
    ... 
} 

而变化：

#clear-bg { 
    ... 
    width:1010px; 
    margin: -290px 0px 0px -505px; 
    ... 
} 

到：

#clear-bg { 
    ... 
    width:1180px;     /* 1150 + 30 */ 
    margin: -290px 0px 0px -590px; /* -1180/2 */ 
    ... 
}