網站制作三欄寬度自適應實現方法
2010/10/20 13:33:44

  
  一、實現要點:三欄均為float: left。中間欄設width為100%。由于中間欄是第一個DIV,故不需要設置它的margin負值使其位于第一行。此時左欄和右欄將換行顯示。通過設置左欄的 margin-left: -100%;和右欄的margin-left: -150px;使三欄處于同一行顯示。此時剛好處于合理位置故無需設為相對定位進行偏移。注意:網站制作為了兼容IE6,container的zoom:1不可少,它是為了使元素支持haslayerout,常常IE6出現誤差不兼容時,應先試下zoom:1是否可以解決。

  01 .container

  02 {

  03    zoom: 1;

  04 }

  05 .column

  06 {

  07    float: left;

  08 }

  09 .center

  10 {

  11    width: 100%;

  12    background: #D6D6D6;

  13 }

  14 .box

  15 {

  16    margin: 0 150px 0 200px;

  17 }

  18 .left

  19 {

  20    margin-left: -100%;

  21    width: 200px;

  22    background: #E79F6D;

  23 }

  24 .right

  25 {

  26    margin-left: -150px;

  27    width: 150px;

  28    background: #77BBDD;

  29 }

  二、實現要點:首先設置裝著3欄的容器container的padding:0 150px 0 200px。由于中間欄是第一個DIV,且設了中間DIV的width:100%。則下面要做的就是:

  1. 把左欄DIV放到container的padding-left的空白處:設margin-left: -100%,則往左移動了100%的距離,但仍然在padding-left空白處的右側,所以再利用相對定位,使左移200px,即left:-200px,或者right:200px。

  2. 把右欄DIV放到container的padding-right的空白處:同上,先使同行顯示則設margin-left: -150px,再設right:-150px移動到正確位置。

  01 #container

  02 {

  03    padding: 0 150px 0 200px;

  04 }

  05 #container .column

  06 {

  07    position: relative;

  08    float: left;

  09 }

  10 #center

  11 {

  12    width: 100%;

  13 }

  14 #left

  15 {

  16    width: 200px;

  17    left: -200px;

  18    margin-left: -100%;

  19 }

  20 #right

  21 {

  22    width: 150px;

  23    margin-left: -150px;

  24    right: -150px;

  25 }

  三、用浮動實現。

  實現要點:三欄均為float: left。中間欄設width為100%,設margin:0 -200px。margin-left和margin-right為-200px意味著原本應在的位置可以向左和向右再占200px,則此時3欄位于同一行,且左欄與中間欄左側重疊,右欄與中間欄右側重疊。只要再將中間欄的數據左右往里各擠200px即可。所以中間欄中再加了個div,設其margin:0 200px即可。

  01 #left

  02 {

  03    width: 200px;

  04    float: left;

  05    background-color: #E79F6D;

  06 }

  07 #center

  08 {

  09    margin: 0 -200px;

  10    width: 100%;

  11    float: left;

  12 }

  13 #center .inner

  14 {

  15    margin: 0 200px;

  16    background-color: #D6D6D6;

  17 }

  18 #right

  19 {

  20    width: 200px;

  21    float: left;

  22    background-color: #77BBDD;

  23 }

返回列表
返回首頁 主站蜘蛛池模板: 曰韩无码二三区中文字幕| 色一情一乱一伦一视频免费看| 女人与大拘交在线播放| 国产精品天天看| 久久久久久亚洲精品不卡| 欧美中文字幕在线| 亚洲精品视频区| 精品伊人久久久久网站| 国产一区韩国女主播| 黄瓜视频在线观看网址| 国产精品久久国产精麻豆99网站 | 欧美日韩亚洲无线码在线观看| 免费v片在线观看| 美女**视频一级毛片| 国产乱码一区二区三区爽爽爽 | 久久免费视频精品| 极品性放荡的校花小说| 亚洲成a人v欧美综合天堂麻豆| 特级黄色毛片视频| 免费看美女被靠到爽的视频| 美村妇真湿夹得我好爽| 国产八十老太另类| 黑人系列合集h| 国产熟睡乱子伦午夜视频| 2020求一个网站男人都懂| 国语精品视频在线观看不卡| v电影v亚洲v欧美v国产| 岛国在线播放v片免费| 中文字幕久久久久| 无限在线观看下载免费视频| 久久成人国产精品免费软件| 最近中国日本免费观看| 亚洲免费人成视频观看| 欧美成人午夜做受视频| 亚洲热线99精品视频| 海角社区hjb09| 亚洲色国产欧美日韩| 狠狠色狠狠色综合网| 伊人情人综合网| 男人边吃奶边爱边做视频国产 | 4hu四虎最新免费地址|