1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <!--
6 摘要: 经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念
7 ，在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，
8 它的布局要求有几点：
9 1、三列布局，中间宽度自适应，两边定宽；
10 2、中间栏要在浏览器中优先展示渲染；
11 3、允许任意列的高度最高；
12 4、要求只用一个额外的DIV标签；
13 5、要求用最简单的CSS、最少的HACK语句；
14 -->
15 <!--
16 此示例适用于:IE6+浏览器
17 -->
18
19 <!--
20 hack:
21 针对浏览器不支持的或者半支持的,采用:
22 _关键字 来进行.
23 -->
24 <meta charset="UTF-8">
25 <meta name="viewport" content="width=device-width, initial-scale=1.0">
26 <meta http-equiv="X-UA-Compatible" content="ie=edge">
27 <title>圣杯gold</title>
28 <style>
29 body {
30 margin: 0;
31 font-size: 16px;
32 color: #fff;
33 }
34
35 header,
36 footer {
37 text-align: center;
38 padding: 20px 3px;
39 background-color: #ccc;
40 }
41
42 p {
43 margin: 0;
44 padding: 20px;
45 text-align: center;
46 }
47
48 main,
49 aside {
50 background-color: #03a9f4;
51 text-align: center;
52 }
53
54 aside,
55 .asideOne,
56 .asideTwo {
57 background-color: #00BCD4;
58 }
59
60 .bodyLeft,
61 .bodyRight {
62 zoom: 1;
63 overflow: hidden;
64 min-width: 400px;
65 }
66
67 .bodyLeft {
68 padding-left: 210px;
69 }
70
71 .bodyRight {
72 padding-right: 210px;
73 }
74
75 .bodyLeft,
76 .bodyRight,
77 .bodyThreeLr,
78 .bodyLlR,
79 .bodyRrL {
80 margin: 10px 0;
81 }
82
83 .bodyLeft main,
84 .bodyRight main,
85 .bodyThreeLr main,
86 .bodyLlR main,
87 .bodyRrL main {
88 float: left;
89 width: 100%;
90 }
91
92 .bodyLeft aside,
93 .bodyThreeLr .asideOne {
94 float: left;
95 width: 200px;
96 margin-left: -100%;
97 position: relative;
98 }
99
100 .bodyLeft aside {
101 left: -210px;
102 _left: 0;
103 }
104
105 .bodyThreeLr .asideOne {
106 left: -210px;
107 _left: 210px;
108 }
109
110 .bodyRight aside,
111 .bodyThreeLr .asideTwo {
112 float: left;
113 width: 200px;
114 margin-left: -200px;
115 position: relative;
116 right: -210px;
117 }
118
119 .bodyThreeLr {
120 zoom: 1;
121 overflow: hidden;
122 padding-left: 210px;
123 padding-right: 210px;
124 }
125
126 .bodyLlR,
127 .bodyRrL {
128 zoom: 1;
129 overflow: hidden;
130 }
131
132 .bodyLlR {
133 padding-left: 420px;
134 }
135
136 .bodyLlR .asideOne,
137 .bodyLlR .asideTwo {
138 float: left;
139 width: 200px;
140 margin-left: -100%;
141 position: relative;
142 }
143
144 .bodyLlR .asideOne {
145 left: -420px;
146 _left: 0px;
147 }
148
149 .bodyLlR .asideTwo {
150 left: -210px;
151 _left: 210px;
152 }
153
154 .bodyRrL {
155 padding-right: 420px;
156 }
157
158 .bodyRrL .asideOne,
159 .bodyRrL .asideTwo {
160 float: left;
161 width: 200px;
162 margin-left: -200px;
163 position: relative;
164 }
165
166 .bodyRrL .asideOne {
167 right: -210px;
168 }
169
170 .bodyRrL .asideTwo {
171 right: -420px;
172 }
173 </style>
174 </head>
175
176 <body>
177 <header>头部</header>
178 <section>
179 <div class="bodyLeft">
180 <main>
181 <p>主内容栏自适应宽度</p>
182 </main>
183 <aside>
184 <p>侧边栏固定宽度</p>
185 </aside>
186 </div>
187
188 <div class="bodyRight">
189 <main>
190 <p>主内容栏自适应宽度</p>
191 </main>
192 <aside>
193 <p>侧边栏固定宽度</p>
194 </aside>
195 </div>
196 </section>
197
198 <section>
199 <div class="bodyThreeLr">
200 <main>
201 <p>主内容栏自适应宽度</p>
202 </main>
203 <div class="asideOne">
204 <p>侧边左栏</p>
205 </div>
206 <div class="asideTwo">
207 <p>侧边右栏</p>
208 </div>
209 </div>
210 </section>
211
212 <section>
213 <div class="bodyLlR">
214 <main>
215 <p>主内容栏自适应宽度</p>
216 </main>
217 <div class="asideOne">
218 <p>侧边左栏1</p>
219 </div>
220 <div class="asideTwo">
221 <p>侧边左栏2</p>
222 </div>
223 </div>
224 </section>
225
226 <section>
227 <div class="bodyRrL">
228 <main>
229 <p>主内容栏自适应宽度</p>
230 </main>
231 <div class="asideOne">
232 <p>侧边右栏1</p>
233 </div>
234 <div class="asideTwo">
235 <p>侧边右栏2</p>
236 </div>
237 </div>
238 </section>
239
240 <footer>底部</footer>
241 </body>
242
243 </html>
