这就是一个三列等高布局的效果,运用了padding补偿法,先上代码:
dom结构:
<div class="container">
<div class="left">
fefwefew
</div>
<div class="center">
wefwefwe
</div>
<div class="right">
<p>ewtfrweqrferq</p>
<p>ewtfrweqrferq</p>
<p>ewtfrweqrferq</p>
<p>ewtfrweqrferq</p>
<p>ewtfrweqrferq</p>
</div>
</div>
css代码
.container{
width: 1000px;
margin: 50px auto;
overflow: hidden;
}
.left,.center,.right{
float: left;
width: 333px;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.left{
background: red;
}
.center{
background: yellow;
}
.right{
background: green;
}
下面我们来谈一下原理,我们需要明白的是overflow:hidden;
是根据什么来界定的,也就是说怎么样就算超出了这个容器呢?(这里所指的是没有指定容器的高度)根据的是容易内元素的外边距,看上面的代码,我们首先给三个子div
增加padding-bottom
,使整个盒子的高度增加,于此同时,三个子div
的外边距也在很远很远的位置,所以我们需要将margin-bottom
给拿上来,于是我们就做了一个正负相抵的操作,这时我们的right
的底部外边距与其本身content area
在同一基线上,也是由于right
的底部外边距的这条基线位于最底部,所以父div
进行overflow
后得到我们想要的三列等高效果。