最近有網友改CSS，弄成兩欄式顯示有點問題，我也幫忙改，所以測試了一下兩欄式的CSS語法，不過就是有點靈異現象，我也是改到無力。不過，有點心得，所以還是寫下來，以免下次又有人問，還要再Try。

首先我用Xuite提供的版型來展示↓
這是拿佈景主題《歡樂包》裡面的3顆許願的貓餅乾-6來套，三欄式一切正常。

接著我們去版面編排裡面改版面選擇，套用兩欄式(中間與右邊兩欄，下圖的B-1)

因為選兩欄式的左欄與中間欄的情形是正常的，如下圖↓，所以接下來以討論中間與右側兩欄式的情形來討論。

改採用兩欄式(中間與右側兩欄式)的情形，如下圖，會發生兩個欄位有重疊的情形發生！！

我們先來討論一下原本的三欄式CSS語法，僅就與三欄位有關的CSS列出，其他省略↓
/*定位框*/
#container {
 position: relative;
text-align: left;     
behavior:expression( this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
  padding:0px 0px 0px 0px;
     margin:0px auto;

 }
   
/*左欄*/
#linksLeft{
        position:absolute;
        left:50px;
        width:180px;
        margin:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}

/*右欄*/
#linksRight{
    position:absolute;
    right:50px;
    width:180px;
    margin:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
 
/*中間欄*/
#mid{
position: center;
background-color:;
margin: 0  240px  0 240px;
padding: 0 0px;
border: #856035 5px solid;
background-color:#634521;
color:#A58A63;
 }
基本上這個CSS語法的定義是透過父元件(在此為定位框container)，它用position:relative; 的相對方式配置。然後左右兩個小欄位則採絕對的定位方式放在左右兩側(分別以position:absolute;以上left:50px;或right:50px;來定義)，中間欄就透過margin-left:240px; 以及margin-right:240px;(在margin: 0  240px  0 240px;定義)，避開與左右兩欄的重疊。所以這樣的CSS語法在三欄式狀態下絕對沒問題！！

但是當缺少左側或右側時，好像就會不太合適，我試了半天，發現改掉左右欄位的兩側留白會是最好的解決方式，我試這將Left:50px; right:50px;縮小到20px;，語法如下↓
/*定位框*/
#container {
 position: relative;
text-align: left;     
behavior:expression( this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
  padding:0px 0px 0px 0px;
     margin:0px auto;

 }

/*左欄*/
#linksLeft{
        position:absolute;
        left:20px;
        width:180px;
        margin:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}

/*右欄*/
#linksRight{
    position:absolute;
    right:20px;
    width:180px;
    margin:0px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
opacity: 0.8;
}
 
/*中間欄*/
#mid{
position: center;
background-color:;
margin: 0  210px  0 210px;
padding: 0 0px;
border: #856035 5px solid;
background-color:#634521;
color:#A58A63;
 }
因為側邊留白變小，所以中間欄對兩側的距離也改小margin: 0  210px  0 210px;。這樣問題看起來是解決了↓


當然我也測試另外的兩欄與三欄，也都正常啦！

我在想，這個問題應該是因為左欄位雖然不顯示，但是兩側留白還是會對中間欄造成影響，所以我改將兩側留白縮小可以解決這個問題，另外一種解法是都不要留白(left:0px; right:0px)，然後你還是希望版面兩側保留一些留白，可以在container裡面去定義只使用width:95%;之類的方式留白。

歡迎有其他解決方案的Xuiters分享經驗