三欄加寬左右靠邊站
如果您使用了三欄加寬語法,中間欄一定會縮減,此時可以利用左右些微的空間做調整
/*三欄加寬語法*/
.thrcol .yc3main {width:100%;float:left; margin-left:-190px;}
.thrcol .yc3mainbd {margin-left:190px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-190px;}
.thrcol .yc3pribd {margin-right:158px;margin-left:-35px;}
.thrcol .yc3subbd {width:180px;float:right;}
.thrcol .yc3sec {width:180px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:2;}
/*三欄左右靠邊站*/
.thrcol .yc3subbd {margin-right:-12px;}
.thrcol .yc3sec {margin-left:-45px;}
自訂樣式檢圖說明範例→ http://xs320.xs.to/xs320/07421/W6-4.jpg
三欄式~欄寬150 語法:(原語法)
/*三欄式*/
.thrcol .yc3main {width:100%;float:left; margin-left:-160px;}
.thrcol .yc3mainbd {margin-left:160px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-160px;}
.thrcol .yc3pribd {margin-right:160px;}
.thrcol .yc3subbd {width:150px;float:right;}
.thrcol .yc3sec {width:150px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}
三欄式~欄寬200 語法:
/*三欄式*/
.thrcol .yc3main {width:100%;float:left; margin-left:-210px;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-210px;}
.thrcol .yc3pribd {margin-right:210px;}
.thrcol .yc3subbd {width:200px;float:right;}
.thrcol .yc3sec {width:200px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}
三欄式~左欄寬150‧右欄寬200 語法:
/*三欄式*/
.thrcol .yc3main {width:100%;float:left; margin-left:-210px;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-160px;}
.thrcol .yc3pribd {margin-right:160px;}
.thrcol .yc3subbd {width:200px;float:right;}
.thrcol .yc3sec {width:150px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}
三欄式~左欄寬200‧右欄寬150 語法:
/*三欄式*/
.thrcol .yc3main {width:100%;float:left; margin-left:-160px;}
.thrcol .yc3mainbd {margin-left:160px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-210px;}
.thrcol .yc3pribd {margin-right:210px;}
.thrcol .yc3subbd {width:150px;float:right;}
.thrcol .yc3sec {width:200px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}
【手動*定義佈局寬度】二欄式
兩欄位~窄欄寬150 語法:(原語法)
/*兩欄式 - 窄欄靠右*/
.twocolga .yc3main {width:100%;float:left; margin-left:-160px;}
.twocolga .yc3mainbd {margin-left:160px;}
.twocolga .yc3pri {width:100%;}
.twocolga .yc3subbd {width:150px;float:right;}
.twocolga .yc3sec {display:none;} /*in case there's content*/
/*兩欄式 - 窄欄靠左*/
.twocoldr .yc3main {width:100%;float:right; margin-right:-160px;}
.twocoldr .yc3mainbd {margin-right:160px;}
.twocoldr .yc3pri {width:100%;}
.twocoldr .yc3subbd {width:150px;}
.twocoldr .yc3sec {display:none;} /*in case there's content*/
兩欄位~窄欄寬200 語法:
/*兩欄式 - 窄欄靠右*/
.twocolga .yc3main {width:100%;float:left; margin-left:-210px;}
.twocolga .yc3mainbd {margin-left:210px;}
.twocolga .yc3pri {width:100%;}
.twocolga .yc3subbd {width:200px;float:right;}
.twocolga .yc3sec {display:none;} /*in case there's content*/
/*兩欄式 - 窄欄靠左*/
.twocoldr .yc3main {width:100%;float:right; margin-right:-210px;}
.twocoldr .yc3mainbd {margin-right:210px;}
.twocoldr .yc3pri {width:100%;}
.twocoldr .yc3subbd {width:200px;}
.twocoldr .yc3sec {display:none;} /*in case there's content*/
留言列表