╰☆ Myshero520╭☆

取自 :(http://tw.yimg.com/i/tw/blog/css/blog_global061120.css)

/*three col layout*/

.thrcol{width:100%;behavior:expression(this.style.width=(document.body.clientWidth<920)?"900px":"auto");}
.thrcol[class] {min-width:930px;behavior:none;}
.ycnt3col {zoom:1;margin:0 10px;}
.ycnt3col:after {content:".";height:0;visibility:hidden;display:block;clear:both;}

由上定義可看出三欄總寬度至少900px以上,
扣去側欄部份其餘給主要文章區,

這也就是為何三欄總是佈滿整個版面了,
在1024px或1280px畫面看起來還ok,

可是目前漸漸不少的特大螢幕+16:9的畫面,
實在是沒有美感可言.....

/*two col layout*/

.twocolga #yhtw_mastfoot, .twocoldr #yhtw_mastfoot {width:750px;margin:0 auto;}
.twocolga, .twocoldr {behavior:expression(this.style.width=(document.body.clientWidth<760)?"750px":"auto");}
.twocolga[class], .twocoldr[class]{min-width:750px;behavior:none;}
.twocolga .ycnt3col,.twocoldr .ycnt3col {zoom:1;width:750px;text-align:left;margin:0 auto;}

由上定義可看出二欄總寬度是750px,
扣去側欄150px後文章區實在給它有夠小,
動不動就把側欄硬擠到下方, 也是沒有美感可言....

tina目前心得只針對二欄版面, 只要動總寬度數字,
就可以達到想要的美感了 !

也就是把原先750px調大為950px,
如下這是沒加大文章區的二欄+1024px畫面參考:

如下這是加大文章區的二欄+1024px畫面參考:
是不是看起來舒服多了呢 ?

由此看出不用受限側欄要在左方或右方,
只要三段語法一切搞定了 !  ^^

後記: 我會補上原先發表版型文章,
想用的朋友也可以自行加上即可 !

/*two col layout 二欄式版面加大寬度設定*/ .twocolga #yhtw_mastfoot, .twocoldr #yhtw_mastfoot {width:950px;margin:0 auto;} .twocolga[class], .twocoldr[class]{min-width:950px;behavior:none;} .twocolga .ycnt3col,.twocoldr .ycnt3col {zoom:1;width:950px;text-align:left;margin:0 auto;}

 
 
 

再補充: 若你和tina一樣想依照版面設計感覺
調整三欄+配合最常看到 1024px畫面

所需語法如下: 950~1000 px均可

   

/*三欄式版面寬度設定*/ .thrcol #yhtw_mastfoot {width:950x;margin:0 auto;} .thrcol[class]{min-width:950px;behavior:none;} .thrcol .ycnt3col {zoom:1;width:950px;text-align:left;margin:0 auto;}

本文出自 Tina~小小世界  http://tw.myblog.yahoo.com/tina88888888-babytony/