200804011250兩欄式版面的CSS自定樣式探討

最近有網友改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分享經驗

平均分數:0 顆星    投票人數:0
我要評分:
回應

瘋狂亂收藏家、收藏CPU、手表以及Xuiters

今天去哪玩??
天氣
累積 | 今日
loading......
訂閱狗猫電子報

輸入你的email address:

Delivered by FeedBurner

    沒有新回應!
關鍵字
Xuite電影貼紙
平均分數:0 顆星
投票人數:0
我要評分:





Powered by Xuite
Re:[讚!!!],By blog 於2015-06-18
Re:[謝謝],By blog 於2015-06-15
Re:[[Xuite秘笈]上傳MP3音樂來自訂背...],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[隨意聽App推薦],By ★ㄚ進のsmile加油站★ 於2015-05-03
Re:[新版CSS]欄位的外框設定],By 天使的花園 於2015-04-12
Re:[[Xuite秘笈]背景音樂自動播放控制(...],By 天使的花園 於2015-04-05
Re:[[Xuite秘笈]背景音樂自動播放控制(...],By 天使的花園 於2015-04-05
Re:[名器],By 名器 於2014-12-16
Re:[棋牌游戏平台,网上棋牌游戏平台,棋牌游戏...],By 棋牌游戏平台,网上棋牌游戏平台,棋牌游戏平台网站,易发棋牌游戏平台-228238.com 於2014-11-24
Re:[凤凰时时彩平台总代qq822588488...],By 凤凰时时彩平台总代qq822588488_vv娱乐时时彩平台登陆_重庆时时彩后三定胆法 於2014-11-17
CSS樣版三欄兩欄倒數冬季計時居家黑色系右欄風水藍色語法自由欄位保健播放器浮動寬度步道如果劇團行動兒童劇夢想兩欄右iPADCSS語法裝潢border耶誕iPhone影音系統家具手機家具望洋山L型Pixar客廳幾何影音播放器邊框粉紅登入問題標題名稱基礎入門圖片縮小Style Information訊息中心餐廳影音選單公告more
不顯示的自由欄位