【CSS】布局之多列等高 - linxiong

公告

这两天看了不少文章，对于css布局多了一些理解，现在来总结下。

我们来写一个最普遍的Top、Left、Content、Right、Foot布局。

第一步：自然是写一个坯子

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
 5         <title>Css布局</title>
 6     </head>
 7     <body>
 8         <div id="parents">
 9            <div id="top">这是Top!</div>
10            <div id="main">
11                   <div id="left">这是Left!</div>
12                <div id="content">这是Content!</div>
13                <div id="right">这是Right!</div>
14              </div>
15            <div id="foot">这是Foot!</div>
16         </div>
17     </body>
18 </html>

效果：

第二步: 我们给这些加上背景色，并将整个parents居中

 1 <style type="text/css">
 2     * {
 3     margin: 0;
 4     padding: 0;
 5     text-Align: center;
 6     }
 7     #parents {
 8         width: 600px;
 9         border: 1px solid;
10         margin: 100px auto 0 auto;    
11     }
12     #top {
13         background: #cc00cc;               
14      }
15     #left {
16         background: #00cc00;    
17     }
18     #content {
19         background: #cccccc;               
20     }
21     #right {    
22         background: #0000cc;              
23     }
24     #foot {
25         background: #cccc00;
26     }
27 </style>

效果：

我们给top和foot设置100的高度，并将left和content向左浮动，right向右浮动。

 1 <style type="text/css">
 2     * {
 3     　　margin: 0;
 4        padding: 0;
 5        text-Align: center;
 6     }
 7     #parents {
 8        width: 600px;
 9        border: 1px solid;
10        margin: 100px auto 0 auto;    
11      }
12     #top {        
13        background: #cc00cc; 
14        height: 100px;              
15     }
16     #left {
17        background: #00cc00;
18        float: left;
19     }
20     #content {
21        background: #cccccc; 
22        float: left;          
23     }
24     #right {    
25        background: #0000cc;
26        float: right;              
27     }
28     #foot {
29        background: #cccc00;
30        height: 100px;
31     }
32 </style>

效果:

貌似有点不对，没事。把foot给clear一下就可以了！

1 #foot {
2     background: #cccc00;
3     height: 100px;
4     clear: both;    
5 }

效果：

我们给left、content、right分别设置宽度100px、400px、100px。

 1 #left {
 2     background: #00cc00;
 3     float: left;
 4     width: 100px;
 5 }
 6 #content {
 7     background: #cccccc; 
 8     float: left;  
 9     width: 400px;        
10 }
11 #right {    
12     background: #0000cc;
13     float: right; 
14     width: 100px;             
15 }

效果:

看起来貌似大功告成！

不过这里的设置还有一个大问题，在网页布局中，中间的left、content、right是根据实际需要添删内容的，而各列高度很多时候都不一样。比如我们设置left的高度为100px。

1 #left {
2     background: #00cc00;
3     float: left;
4     width: 100px;
5     height: 100px;
6 }

效果：

我们看到，当其中一个高度发生变化时，其余两者并没有随之改变，这样布局就出现了一个很大的漏洞。

如何使中间层的三者在其中随意一个高度发生变化时，依旧能保持三者高度一致呢？

这里就牵涉到一个负边距的使用技巧了。

这个方法称之为padding补偿法：

　　首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，这样就成功的使得三者列高最起码看起来是等高的。这样也就满足了我们的需求。

 1 #left {
 2     background: #00cc00;
 3     float: left;
 4     width: 100px;
 5     height: 100px;
 6     margin-bottom: -2000px;
 7     padding-bottom: 2000px;
 8 }
 9 #content {
10     background: #cccccc; 
11     float: left;  
12     width: 400px;        
13     margin-bottom: -2000px;
14     padding-bottom: 2000px;
15 }
16 #right {    
17     background: #0000cc;
18     loat: right; 
19     width: 100px;     
20     margin-bottom: -2000px;
21     padding-bottom: 2000px;        
22 }

效果:

现在产生了一个问题，高度溢出了。

我们可以对其父元素配置一个overflow: hidden来对溢出部分进行修剪。

1 #main {
2     overflow: hidden;    
3 }

这样就大功告成了：

此刻，我们给content添加内容改变他的高度。

1 <div id="content">这是Content!<br><br><br>打算打算打<br><br><br>dwdoahdoa<br><br>的味道</div>

效果：

我们看到，当content的高度发生变化时，left和right的高度随之改变，这就是多列等高的奥秘。

最后附上完整代码：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />    
 5         <title>PE Layout Example 1</title>
 6         <style type="text/css">
 7             * {
 8                 margin: 0;
 9                 padding: 0;
10                 text-Align: center;
11             }
12             #parents {
13                 width: 600px;
14                 border: 1px solid;
15                 margin: 100px auto 0 auto;    
16             }
17             #top {        
18                 background: #cc00cc; 
19                 height: 100px;              
20             }
21             #main {
22                 overflow: hidden;
23                 width: 100%;
24             }
25             #left {
26                 background: #00cc00;
27                  float: left;
28                  width: 100px;
29                  margin-bottom: -2000px;
30                  padding-bottom: 2000px;
31             }
32             #content {
33                 background: #cccccc; 
34                 float: left;  
35                 width: 400px;    
36                 margin-bottom: -2000px;
37                  padding-bottom: 2000px;
38             }
39             #right {    
40                 background: #0000cc;
41                 float: right; 
42                 width: 100px; 
43                 margin-bottom: -2000px;
44                  padding-bottom: 2000px;        
45             }
46             #foot {
47                 background: #cccc00;
48                 height: 100px;
49                 clear: both;
50             }
51         </style>
52     </head>
53     <body>
54         <div id="parents">
55            <div id="top">这是Top!</div>
56            <div id="main">
57                   <div id="left">这是Left!</div>
58                <div id="content">这是Content!<br><br><br>打算打算打<br><br><br>dwdoahdoa<br><br>的味道</div>
59                <div id="right">这是Right!</div>
60              </div>
61            <div id="foot">这是Foot!</div>
62         </div>
63     </body>
64 </html>

posted on 2014-10-20 23:42 linxiong 阅读(1180) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部