自适应布局

  • 浮动

  • 一列绝对定位,一列用margin撑开空间

  • margin负值:主体用一层包裹,浮动,内层用margin留出空间;其他列浮动,使用margin调整到空出的位置 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2    "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html>
 5 <head>
 6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7     <title>layout</title>
 8     <meta name="author" content="Iori" />
 9     <!-- Date: 2013-08-10 -->
10     <style type="text/css">
11         body{
12             background:#CCFFCC;
13             margin:0;
14             padding:0;
15         }
16         .wrap{
17             position:relative;
18             background:#CCCCFF;
19             margin:10px;
20             border: dashed 1px red;
21             padding:3px;
22             height:100px;
23             border-radius: 2px;
24         }
25         .wrap div{
26             background:#fff;
27         }
28         .left{
29             position: absolute;
30             left:3px;
31             top:3px;
32             width:30%;
33             /*height:100%;*/
34         }
35         .main{
36             margin: 0 0 0 31%;
37             height:100%;
38         }
39         
40         .left2{
41             float:left;
42             width:30%;
43         }
44         
45         .main2{
46             float:right;
47             width:69%;
48             height:100%;
49         }
50         
51         .left3{
52             width:30%;
53             float:left;
54             margin-left:-100%;
55         }
56         #container{
57             background:#CCCCFF;
58             float:left;
59             width:100%;
60         }
61         .main3{
62             margin-left:31%;
63         }
64     </style>
65 </head>
66 <body>
67     <h3> 一列绝对定位,一列margin撑开距离</h3>
68     <div class="wrap">
69         <div class="left">left position:absolute</div>
70         <div class='main'> main margin为左右两边宽度</div>
71     </div>
72     
73     <h3>分别浮动 </h3>
74     <div class="wrap" >
75         <div class="left2">float:left</div>
76         <div class='main2'> float:right</div>
77     </div>
78     
79     <h3>主体用一层包裹,浮动,内层用margin留出空间;其他列浮动,使用margin调整到空出的位置 </h3>
80     <div class="wrap" >
81         <div id="container">
82             <div class='main3'>main <br /> 
83                 外层:float:left 内层:margin-left:为.left.style.width
84                 </div>
85         </div>
86         <div class="left3">float:left; margin-left:-100%</div>
87     </div>
88 </body>
89 </html>
View Code

 

各列等高的设置:

　　padding正值, padding包含在盒模型的空间内,padding-bottom使用一个较大值撑开空间

　　margin负值,  margin是盒子与盒子之间距离,用margin-bottom使用负值,将外层边框拉回,形成等高

　　外层overflow:hidden: 将padding撑开的空间溢出的部分隐藏

　　由于使用padding撑开而溢出 并且溢出的部分隐藏, 会造成下边框溢出而不可见

posted on 2013-08-10 21:51  Iori_z  阅读(122)  评论(0)    收藏  举报

导航