圣杯布局

  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>