關不住的童心~Elaine闖蕩世界記事

幸運的是，在這一大堆令人眼暈的div裡，調整三欄式內文寬度的Css只需要修改很小一部份就好了。

1.首先是#container3

/*所有內容區塊3*/
#container3 {
overflow:hidden;
position:relative;
width:1035px; 增加版面寬度
background:#fff;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
-moz-box-shadow:1px 1px 2px #aaa;
-webkit-box-shadow:1px 1px 2px #aaa;
box-shadow:1px 1px 2px #aaa;
margin:15px auto 30px;
padding:25px 0 10px;
}
 

在這一串Css中，只要改width寬度的數值就好了，這樣版面就會變廣了，除了版首的圖片會出一點問題外，其餘的都不必修改。

2.再來就進入主題調整內文寬度了

/*文章列表回應區塊*/
#article-area {
position:relative;
z-index:500;
width:550px; 調整成想要的寬度
margin:0 auto;

這個時候，文章的版面可能長到將側欄重疊了。

3.於是，接下來就要調整側欄。

這時候要說到重點了。由於#content和#links是併行的，所以兩者的寬度width不能超過#container3，否則側欄就會被擠下去。