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 */ 
    ... 
}