1 <html lang="en">
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>圣杯布局</title>
 8     <style>
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13         
14         .container {
15             /* 设置最小宽度400px */
16             min-width: 400px;
17             height: 200px;
18             background-color: greenyellow;
19             /*上下为零,左右为200  */
20             padding: 0 200px;
21         }
22         
23         .left,
24         .right {
25             width: 200px;
26             height: 200px;
27             background-color: red;
28             /* 设置为左浮动 */
29             float: left;
30         }
31         
32         .main {
33             /* 中间内容也为左浮动,设置宽度为100% */
34             width: 100%;
35             height: 200px;
36             background-color: blue;
37             float: left;
38         }
39         
40         .left {
41             margin-left: -100%;
42             position: relative;
43             left: -200px;
44         }
45         
46         .right {
47             margin-left: -200px;
48             position: relative;
49             right: -200px;
50         }
51     </style>
52 </head>
53 
54 <body>
55     <!-- 三列布局  左右两栏固定宽度,中间部分自适应
56   中间部分要在浏览器中优先暂时渲染
57   圣杯布局手法:
58    1.设置元素的container 的位置
59    2.将主体部分的三个子元素都设置左浮动
60    3.设置main宽度width:100%,让其单独暂满一行
61    4.设置left和right 负的外边距
62    5.使用相对定位移动left 和right
63 
64  
65 -->
66     <div class="container">
67         <div class="main">middle</div>
68         <div class="left">left</div>
69         <div class="right">right</div>
70     </div>
71 </body>
72 
73 </html>