一、左右宽度固定，中间自适应左右宽度固定，中间自适应

(1)浮动布局

 1     <style media="screen">
 2     /* 初始化样式 */
 3         html *{
 4             padding: 0;
 5             margin: 0;
 6         }
 7         div{
 8             min-height: 300px;
 9         }
10         section .left{
11             background-color: yellow;
12         }
13         section .right{
14             background-color: green;
15         }
16         section .center{
17             background-color: orange;
18         }
19     /* 三栏布局中的浮动定位 */
20         section.float article .left{
21             float: left;
22             width: 300px;
23         }
24         section.float .right{
25             float: right;
26             width: 300px;
27         }
28     </style>
29 </head>
30 <body>
31     <h1>左右宽度固定，中间自适应</h1>
32     <section class="float">
33         <article class="left-right-center">
34             <div class="left"></div>
35             <div class="right"></div>
36             <div class="center">三栏布局中浮动定位</div>
37         </article>
38     </section>
39 </body>

注：三栏布局中的浮动定位方法，的div排列顺序依次是div.left、div.right、div.center。因为div.center没有浮动，如果按照div.left、div.center、div.right的顺序排列的话会导致div.right浮动的时候发现第二行被div.center占满，使得div.right跑到第二行。

(2)绝对定位布局

 1    <style media="screen">
 2     /* 初始化样式 */
 3         html *{
 4             padding: 0;
 5             margin: 0;
 6         }
 7         div{
 8             min-height: 300px;
 9         }
10         section .left{
11             background-color: yellow;
12         }
13         section .right{
14             background-color: green;
15         }
16         section .center{
17             background-color: orange;
18         }
19     /* 三栏布局中的绝对定位 */
20         section.absolute .left{
21             position: absolute;
22             left: 0;
23             width: 300px;
24         }
25         section.absolute .center{
26             position: absolute;
27             left: 300px;
28             right: 300px;
29         }
30         section.absolute .right{
31             position: absolute;
32             right: 0;
33             width: 300px;
34         }
35     </style>
36 </head>
37 <body>
38     <h1>左右宽度固定，中间自适应</h1>
39     <section class="absolute">
40         <article class="left-center-right">
41             <div class="left"></div>
42             <div class="center">三栏布局中的绝对定位布局</div>
43             <div class="right"></div>
44         </article>
45     </section>
46 </body>

 

 

(3)弹性盒模型flex

 1     <style media="screen">
 2     /* 初始化样式 */
 3         html *{
 4             padding: 0;
 5             margin: 0;
 6         }
 7         div{
 8             min-height: 300px;
 9         }
10         section .left{
11             background-color: yellow;
12         }
13         section .right{
14             background-color: green;
15         }
16         section .center{
17             background-color: orange;
18         }
19     /* 三栏布局中的弹性盒模型定位 */
20         section.flex article{
21             display: flex;
22         }
23         section.flex .left{
24             width: 300px;
25         }
26         section.flex .center{
27             flex: 1;
28         }
29         section.flex .right{
30             width: 300px;
31         }
32     </style>
33 </head>
34 <body>
35     <h1>左右宽度固定，中间自适应</h1>
36     <section class="flex">
37         <article class="left-center-right">
38             <div class="left"></div>
39             <div class="center">三栏布局中的弹性盒模型布局</div>
40             <div class="right"></div>
41         </article>
42     </section>
43 </body>

 

(4)表格布局

注：使用表格做自适应布局时，应该讲display:table的元素宽度设置为width:100%。

 1   <style media="screen">
 2     /* 初始化样式 */
 3         html *{
 4             padding: 0;
 5             margin: 0;
 6         }
 7         div{
 8             min-height: 300px;
 9         }
10         section .left{
11             background-color: yellow;
12         }
13         section .right{
14             background-color: green;
15         }
16         section .center{
17             background-color: orange;
18         }
19     /* 三栏布局中的表格 */
20         section.table article{
21             display: table;
22             width: 100%;
23             height: 300px;
24         }
25         section.table .left{
26             display: table-cell;
27             width: 300px;
28         }
29         section.table .center{
30             display: table-cell;
31         }
32         section.table .right{
33             display: table-cell;
34             width: 300px;
35         }
36     </style>
37 </head>
38 <body>
39     <h1>左右宽度固定，中间自适应</h1>
40     <section class="table">
41         <article class="left-center-right">
42             <div class="left"></div>
43             <div class="center">三栏布局中的表格布局</div>
44             <div class="right"></div>
45         </article>
46     </section>
47 </body>

(5)网格布局

注：和以上4组代码不同，网格布局时并没有在第7-9行代码处设置div的高度，而是在第23行设置了grid-template-rows:300px。

 1     <style media="screen">
 2     /* 初始化样式 */
 3         html *{
 4             padding: 0;
 5             margin: 0;
 6         }
 7         div{
 8             /* min-height: 300px; */
 9         }
10         section .left{
11             background-color: yellow;
12         }
13         section .right{
14             background-color: green;
15         }
16         section .center{
17             background-color: orange;
18         }
19     /* 三栏布局中的网格布局 */
20         section.grid article{
21             display: grid;
22             grid-template-columns: 300px auto 300px;
23             grid-template-rows: 300px;
24         }
25     </style>
26 </head>
27 <body>
28     <h1>左右宽度固定，中间自适应</h1>
29     <section class="grid">
30         <article class="left-center-right">
31             <div class="left"></div>
32             <div class="center"><p>三栏布局中的网格布局</p></div>
33             <div class="right"></div>
34         </article>
35     </section>
36 </body>

(6）双飞翼布局

 1     <style media="screen">
 2         /* 圣杯布局 */
 3         header{
 4             height: 150px;
 5             background: green;
 6         }
 7         section{
 8             height: 300px;
 9             background: orange;
10             padding-left: 150px;
11             padding-right: 100px;
12         }
13         section .middle{
14             float: left;
15             height: 20px;
16             width: 100%;
17             background: blue;
18         }
19         section .left{
20             position: relative;
21             left: -150px;
22             float: left;
23             width: 150px;
24             height: 20px;
25             background: pink;
26             margin-left: -100%;
27         }
28         section .right{
29             position: relative;
30             right: -100px;
31             float: left;
32             height: 20px;
33             width: 100px;
34             background: purple;
35             margin-left: -100px;
36         }
37         footer{
38             height: 100px;
39             background: yellow;
40         }
41     </style>
42 </head>
43 <body>
44     <header>        
45     </header>
46     <section>
47         <div class="middle">
48             middle
49         </div>
50         <div class="left">
51             left
52         </div>
53         <div class="right">
54             right
55         </div>
56     </section>
57     <footer>
58     </footer>
59 </body>

 

(7)圣杯布局

 1     <style media="screen">
 2     /* 双飞翼布局 */
 3 
 4     header {
 5         height: 150px;
 6         background: red；
 7     }
 8 
 9     section {
10         height: 300px;
11         background: green;
12         overflow: hidden;
13     }
14 
15     div.middle {
16         float: left;
17         width: 100%;
18         margin-bottom: -999px;
19         padding-bottom: 999px;
20     }
21 
22     div.middle .inner {
23 
24         margin-left: 150px;
25         margin-right: 100px;
26     }
27 
28     div.left {
29         float: left;
30         width: 150px;
31         background: yellow;
32         margin-left: -100%;
33         margin-bottom: -999px;
34         padding-bottom: 999px;
35     }
36 
37     div.right {
38         float: left;
39         width: 100px;
40         background: orange;
41         margin-left: -100px;
42         margin-bottom: -999px;
43         padding-bottom: 999px;
44     }
45 
46     footer {
47         height: 100px;
48         background: blue;
49     }
50     </style>
51 </head>
52 <body>
53     <header>
54     </header>
55     <section>
56         <div class="middle">
57             <div class="inner">
58                 <p>middle</p>
59                 <p>middle</p>
60                 <p>middle</p>
61                 <p>middle</p>
62                 <p>middle</p>
63                 <p>middle</p>
64                 <p>middle</p>
65                 <p>middle</p>
66             </div>
67         </div>
68         <div class="left">left</div>
69         <div class="right">right</div>
70     </section>
71     <footer>
72     </footer>
73 </body>

 

圣杯布局和双飞翼布局的共同点是都是将中间的div放在HTML结构的前面，然后通过浮动和margin负边距使得left部分和right部分分别来到middle的左边和右边。

区别是圣杯布局对父元素设置属性pading-left和padding-right让div.middle的内容显示，然后再通过相对定位对left部分和right部分定位。

双飞翼布局是给middle元素中又增加了一层结构inner，然后对inner设置属性margin-left和margin-right。