你的位置:首页 > 网页设计

[网页设计]三列自适应布局的实现方式(兼容IE6+)


1.绝对定位方式

 1 <div class="nm-3-lr"> 2   <div class="aside-f"> 3     <p>侧边栏1固定宽度</p> 4   </div> 5   <div class="main"> 6     <p>绝对定位-主内容栏自适应宽度</p> 7   </div> 8   <div class="aside-s"> 9     <p>侧边栏2固定宽度</p>10   </div>11 </div>12 13 <div class="nm-3-lc">14   <div class="aside-f">15     <p>侧边栏1固定宽度</p>16   </div>17   <div class="main">18     <p>绝对定位-主内容栏自适应宽度</p>19   </div>20   <div class="aside-s">21     <p>侧边栏2固定宽度</p>22   </div>23 </div>24 25 <div class="nm-3-cr">26   <div class="aside-f">27     <p>侧边栏1固定宽度</p>28   </div>29   <div class="main">30     <p>绝对定位-主内容栏自适应宽度</p>31   </div>32   <div class="aside-s">33     <p>侧边栏2固定宽度</p>34   </div>35 </div>

 1 /* 普通布局 */ 2 .nm-3-lr, 3 .nm-3-lc, 4 .nm-3-cr 5 { 6   min-width: 400px; 7   margin: 10px 0; 8   position: relative;  9   *zoom: 1;10 }11   /* 左中右 中间自适应 */12     .nm-3-lr .aside-f{13       position: absolute;14       top: 0;15       left: 0;16       width: 200px;17     }18     .nm-3-lr .main{19       margin: 0 210px;20     }21     .nm-3-lr .aside-s{22       position: absolute;23       top: 0;24       right: 0;25       width: 200px;  26     }27 28   /* 左中右 右侧自适应 */29     .nm-3-lc .aside-f{30       position: absolute;31       top: 0;32       left: 0;33       width: 200px;34     }35     .nm-3-lc .main{36       margin-left: 420px;37     }38     .nm-3-lc .aside-s{39       position: absolute;40       top: 0;41       left: 210px;42       width: 200px;  43     }44 45     /* 左中右 左侧自适应 */46     .nm-3-cr .aside-f{47       position: absolute;48       top: 0;49       right: 210px;50       width: 200px;51     }52     .nm-3-cr .main{53       margin-right: 420px;54     }55     .nm-3-cr .aside-s{56       position: absolute;57       top: 0;58       right: 0;59       width: 200px;  60     }

2.采用圣杯布局

 1 <div class="bd-3-lr"> 2   <div class="main"> 3     <p>圣杯布局-主内容栏自适应宽度</p> 4   </div> 5   <div class="aside-f"> 6     <p>侧边栏1固定宽度</p> 7   </div> 8   <div class="aside-s"> 9     <p>侧边栏2固定宽度</p>10   </div>11 </div>12 13 <div class="bd-3-lc">14   <div class="main">15     <p>圣杯布局-主内容栏自适应宽度</p>16   </div>17   <div class="aside-f">18     <p>侧边栏1固定宽度</p>19   </div>20   <div class="aside-s">21     <p>侧边栏2固定宽度</p>22   </div>23 </div>24 25 <div class="bd-3-cr">26   <div class="main">27     <p>圣杯布局-主内容栏自适应宽度</p>28   </div>29   <div class="aside-f">30     <p>侧边栏1固定宽度</p>31   </div>32   <div class="aside-s">33     <p>侧边栏2固定宽度</p>34   </div>35 </div>

 1 /* 圣杯布局 */ 2 .bd-3-lr, 3 .bd-3-lc, 4 .bd-3-cr 5 { 6   min-width: 400px; 7   margin: 10px 0; 8 } 9   /* 左中右 中间自适应 */10     .bd-3-lr {11       zoom:1;12       overflow:hidden;13       padding-left:210px;14       padding-right:210px;15     }16     .bd-3-lr .main {17       float:left;18       width:100%;19     }20     .bd-3-lr .aside-f {21       float: left;22       width:200px;23       margin-left: -100%;24   25       position:relative;26       left: -210px;27       _left: 210px; /*IE6 hack*/28     }29     .bd-3-lr .aside-s {30       float: left;31       width:200px;32       margin-left: -200px;33   34       position:relative;35       right: -210px;36     }37 38   /* 左中右,右侧自适应 */39     .bd-3-lc {40       zoom:1;41       overflow:hidden;42       padding-left:420px;43     }44     .bd-3-lc .main {45       float:left;46       width:100%;47     }48     .bd-3-lc .aside-f {49       float: left;50       width:200px;51       margin-left: -100%;52       position:relative;53       left: -420px;54       _left: 0px; /*IE6 hack*/55     }56     .bd-3-lc .aside-s {57       float: left;58       width:200px;59       margin-left: -100%;60       position:relative;61       left: -210px;62       _left: 210px; /*IE6 hack*/63     }64 65   /* 左中右,左侧自适应 */66     .bd-3-cr{67       overflow: hidden;68       padding-right: 420px;69     }70     .bd-3-cr .main {71       width: 100%;72       float: left;73     }74     .bd-3-cr .aside-f {75       width: 200px;76       float: left;77       margin-left: -200px;78       position: relative;79       left: 210px;80     }81     .bd-3-cr .aside-s {82       width: 200px;83       float: left;84       margin-left: -200px;85       position: relative;86       left: 420px;87     }

3.采用双飞翼布局

 1 <div class="df-3-lr"> 2   <div class="df-main"> 3     <div class="main-warp"> 4       <p>双飞翼布局-主内容栏自适应宽度</p> 5     </div> 6   </div> 7   <div class="aside-f"> 8     <p>侧边栏1固定宽度</p> 9   </div>10   <div class="aside-s">11     <p>侧边栏2固定宽度</p>12   </div>13 </div>14 15 <div class="df-3-lc">16   <div class="df-main">17     <div class="main-warp">18       <p>双飞翼布局-主内容栏自适应宽度</p>19     </div>20   </div>21   <div class="aside-f">22     <p>侧边栏1固定宽度</p>23   </div>24   <div class="aside-s">25     <p>侧边栏2固定宽度</p>26   </div>27 </div>28 29 <div class="df-3-cr">30   <div class="df-main">31     <div class="main-warp">32       <p>双飞翼布局-主内容栏自适应宽度</p>33     </div>34   </div>35   <div class="aside-f">36     <p>侧边栏1固定宽度</p>37   </div>38   <div class="aside-s">39     <p>侧边栏2固定宽度</p>40   </div>41 </div>

 1 /* 双飞翼布局 */ 2 .df-3-lr, 3 .df-3-lc, 4 .df-3-cr 5 { 6   margin: 10px 0; 7 } 8   /* 右侧栏固定宽度,左侧自适应 */ 9     .df-rgt{ 10       zoom: 1; 11       overflow: hidden; 12     } 13     .df-rgt .df-main{ 14       float: left; 15       width: 100%; 16     } 17     .df-rgt .df-main .main-warp{ 18       margin-right: 210px; 19     } 20     .df-rgt .aside{ 21       width: 200px; 22       margin-left: -200px; 23       float: left; 24     } 25  26   /* 左中右 中间自适应 */ 27     .df-3-lr{ 28       zoom: 1; 29       overflow: hidden; 30     } 31     .df-3-lr .df-main{ 32       float: left; 33       width: 100%; 34     } 35     .df-3-lr .df-main .main-warp{ 36  37       margin: 0 210px; 38     } 39     .df-3-lr .aside-f, .df-3-lr .aside-s{ 40       width: 200px; 41       float: left; 42     } 43     .df-3-lr .aside-f{ 44  45       margin-left: -100%; 46     } 47     .df-3-lr .aside-s{ 48  49       margin-left: -200px; 50     } 51  52   /* 左中右 右侧自适应 */ 53     .df-3-lc{ 54       zoom: 1; 55       overflow: hidden; 56     } 57     .df-3-lc .df-main{ 58       width: 100%; 59       float: left; 60     } 61     .df-3-lc .df-main .main-warp{ 62        63       margin-left: 420px; 64     } 65     .df-3-lc .aside-f, .df-3-lc .aside-s{ 66       width: 200px; 67       float: left; 68     } 69     .df-3-lc .aside-f{ 70       margin-left: -100%; 71     } 72     .df-3-lc .aside-s{ 73       margin-left: -100%; 74       position: relative; 75       left: 210px; 76     } 77  78   /* 左中右 左侧自适应 */ 79     .df-3-cr{ 80       zoom: 1; 81       overflow: hidden; 82     } 83     .df-3-cr .df-main{ 84       width: 100%; 85       float: left; 86     } 87     .df-3-cr .df-main .main-warp{ 88       margin-right: 420px; 89     } 90     .df-3-cr .aside-f, .df-3-cr .aside-s{ 91       width: 200px; 92       float: left; 93     } 94     .df-3-cr .aside-f{ 95       margin-left: -200px; 96       position: relative; 97       right: 210px; 98     } 99     .df-3-cr .aside-s{100       margin-left: -200px;101     }

整体效果:http://runjs.cn/detail/lvf5bmzq