三列自适应布局的实现方式(兼容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         }

时间： 2024-12-28 18:52:52

三列自适应布局的实现方式(兼容IE6+)的相关文章

三列自适应布局（左右定宽中间自适应）

左右定中间自适应三列布局 1.绝对定位 2.浮动 3.flex 1 1.绝对定位 2 <!doctype html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>三栏布局</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 #main { 13 m

自适应布局(四种写法,三种方案) 1.使用position:absolute. <!doctype html> <html> <head> <style> body{ width: 100%; padding: 0; margin: 0; } div{ height: 500px; } .div1{ width: 100px; background: red; float: left; } .div2{ height: 500px; background:

水平方向两列三列自适应布局

<html>  <div style="float:right;background-color:blue;width:100px;height:100px;"></div> <div style="float:left;background-color:lightgray;width:100px;height:100px;"></div> <div style=

使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法绝对定位法原

（转转转）使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年网易内推前端工程师面试的时候也被问到. 我这里主要分为两大类,一类是基于position传统的实现,一类是基于CSS3新特性弹性盒模型布局实现. 1. 基于传统的position和margin等属性进行布局这里也分为三种方法,分别为绝对定位法,圣杯布局,自身浮动法. 1).绝对定位法绝对定位法原理是将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们上面,然后使用margin

css 两列自适应布局的4种思路

前面的话前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 float [思路一]float 在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果.但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用.而float和overflow配合可实现两列自适应效果.使用overfl

三栏自适应布局

常用的有三种方式: 1.绝对定位法(最易理解) 左右两栏采用绝对定位,分别固定于页面的左右两侧,中间的主体栏用左右margin值撑开距离.于是实现了三栏自适应布局. 1 <html> 2 3 <head> 4 5 <title>三栏自适应布局</title> 6 7 <style type="text/css"> 8 9 html,body{ 10 11 margin:0; 12 13 height:100%; 14 15 }

两栏三栏自适应布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> html,body{width:100%;height:100%;overflow:hidden;} html{_height:auto;_padd

布局一两列自适应布局

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>两列自适应布局</title> <style type="text/css"> .out{ width: 90%; height: 500px; margin: 0 auto; background: ye