等高左中右结构与卷帘门

原理： 

子元素浮动，父元素不设高度，通过清除浮动(这里是通过触发ie的haslayout,和w3c的bfc达到清除浮动的效果)，被子元素撑开，形成自己高度

父元素中width用于触发haslayout，overflow:hidden用于触发bfc,overflow:hidden同时起到溢出隐藏的效果

通过同时给左中右3个板块使用“padding-bottom:1000px;”构建3个等高的范围，再通过3个“margin-bottom:-1000px;”把3个范围置于外部，结合父元素的“溢出隐藏”，3个板块具有了相同的0起点，同时隐藏着相同的高度背景，一个板块自身高度的变化都会影响到父元素的高度，父元素的高度又同时影响到3个板块的“溢出隐藏”的范围，从而最终达到“等高左中右结构”的效果

打个比方：

好比a、b、c三个人同时站在一个卷帘门后面，a、b、c无论是谁去打开卷帘门，在门外的路人看来，3个人被看到的部分都是一样高的，也就是"等高"的。

等高左中右结构的父容器就是"卷帘门",左、中、右三个结构就是那三个人，要想让父容器具有卷帘门的效果，重点是：1、无高度且清除浮动；2、溢出隐藏

子元素的padding-bottom:1000px;是创建“身高”，margin-bottom:-1000px;是藏到"卷帘门里面"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<style type="text/css">
body{margin:0;}
#all{
    width:700px;
    margin:0 auto;
    overflow:hidden;
}
#left,#center,#right{
    margin-bottom:-1000px;
    padding-bottom:1000px;
}
#left{
    float:left;
    width:200px;
    
}
#center{
    float:left;
    width:300px;
    
}
#right{
    float:left;
    width:200px;
    
}
</style>
<body>
 
<div id="all">
    <div id="left">
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    <p>left</p>
    </div>
    <div id="center">333</div>
    <div id="right"></div>
</div>

 

posted on 2014-08-09 23:50  htmldog  阅读(132)  评论(0)    收藏  举报

导航