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>