三列自适应布局的实现方式(兼容IE6+)_html/css_WEB-ITnose

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