常见布局

圣杯布局

效果：左右宽度固定，缩小页面，中间盒子随页面变化

原理：父盒子里三个子盒子，三个子盒子都左浮动，给左盒子margin-left:-100%,右盒子margin-left:右盒子的宽，这样在一个水平内，但左右盒子盖住中间的盒子

，给父盒子加padding值，在给左右盒子position:relative,（相对定位是相对于原来的位置）。

缺点：不能无限缩小，页面缩小到左右盒子宽的和时，布局会乱

解决：给body{min-width:大于左右盒子的宽度和}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 <style type="text/css">
 7     body,div{margin:0;padding:0;}
 8     body{min-width:700px;}
 9 .column{
10     height:300px;float:left;
11 }
12 .main{
13     width:100%;background:red;
14 }
15 .left{
16     width:200px;margin-left:-100%;background:blue;
17     position:relative;left:-200px;
18 }
19 .right{width:200px;margin-left:-200px; background:orange;
20 position:relative;left:200px;
21 }
22 .container{
23     padding:0 200px 0 200px;
24 }
25 
26 </style>
27 
28 
29 </head>
30 <body>
31     <div class="container">
32         <div class="column main">acvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
33         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
34         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
35         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
36         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
37         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
38         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf</div>
39         <div class="column left"></div>
40         <div class="column right"></div>
41     </div>
42 </body>
43 </html>
View Code

 

双飞翼布局

效果同圣杯布局

原理：中间盒子内加一个盒子，给margin属性

缺点：不能无限缩小，页面缩小到左右盒子宽的和时，布局会乱

解决：给body{min-width:大于左右盒子的宽度和}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 <style type="text/css">
 7     body,div{margin:0;padding:0;}
 8     body{min-width:700px;}
 9 .column{
10     height:300px;float:left;
11 }
12 .main{
13     width:100%;
14 }
15 .inner{
16     height:300px;background:red;width:100%;
17     margin:0 200px 0 200px;
18 }
19 .left{
20     width:200px;margin-left:-100%;background:blue;
21 
22 }
23 .right{width:200px;margin-left:-200px; background:orange;
24 
25 }
26 
27 
28 </style>
29 
30 
31 </head>
32 <body>
33     <div class="container">
34         <div class="column main">
35 <div class="inner">
36         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
37         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
38         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
39         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
40         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
41         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf
42         acvbdfdfesdfacvbdfdfesdfacvbdfdfesdfacvbdfdfesdf</div>
43         </div>
44         <div class="column left"></div>
45         <div class="column right"></div>
46     </div>
47 </body>
48 </html>
View Code

 

posted @ 2015-12-17 09:00  wxl_yq  阅读(180)  评论(0)  编辑  收藏  举报