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 棋牌游戏平台,网上棋牌游戏平台,棋牌游戏平台网站,易发棋牌游戏平台-228238.com 於2014-11-24
Re:[凤凰时时彩平台总代qq822588488...],By 凤凰时时彩平台总代qq822588488_vv娱乐时时彩平台登陆_重庆时时彩后三定胆法 於2014-11-17
Re:[重庆时时彩平台评测,哪个时时彩平台信誉好...],By 重庆时时彩平台评测,哪个时时彩平台信誉好,波音时时彩平台怎么样 於2014-11-17
Re:[188bet金宝博,188bet金宝博网...],By 188bet金宝博,188bet金宝博网址,188bet金宝博滚球,188bet金宝博官网,188bet金宝博事件 於2014-11-16
Re:[澳门赌场视频],By 澳门赌场视频 於2014-11-16
Re:[优博时时彩平台开户,时时彩平台评测,凤凰...],By 优博时时彩平台开户,时时彩平台评测,凤凰时时彩平台代理 於2014-11-15
Re:[宝都时时彩平台注册送钱- 百乐时时彩平台...],By 宝都时时彩平台注册送钱- 百乐时时彩平台代理 於2014-11-15
Re:[重庆时时彩平台出租,时时彩平台,时时彩平...],By 重庆时时彩平台出租,时时彩平台,时时彩平台评测网-总代QQ:822588488 於2014-11-15
Re:[澳门盈丰国际理财],By 澳门盈丰国际理财 於2014-11-15
Re:[盈丰娱乐真钱轮盘],By 盈丰娱乐真钱轮盘 於2014-11-15
CSS樣版三欄兩欄倒數冬季計時居家右欄黑色系藍色風水自由欄位語法播放器浮動寬度保健步道如果劇團兒童劇行動夢想iPAD兩欄右裝潢CSS語法耶誕borderiPhone影音系統家具手機家具Pixar客廳幾何影音播放器望洋山L型邊框標題名稱粉紅基礎入門圖片縮小Style Information訊息中心文章鎖餐廳童話故事密碼鎖more
不顯示的自由欄位