先来看代码:
<div class="wrapper">
<div class="box1">
<h1>Box1</h1>
</div>
<div class="box2">
<h1>Box2</h1>
<p>sdfdsfdsfsd</p>
</div>
</div>
.wrapper{
overflow:hidden;
border:1px solid green;
}
.box1,.box2{
margin:0px 20px;
float:left;
}
.box1{
background:yellow;
}
.box2{
background:blue;
}
效果如下图所示:
由于栏中的内容问题,导致box1与box2的内容不等高。这里巧妙利用padding和margin属性即可解决等高问题。先设置padding-bottom,让背景有足够的填充空间:
.box1,.box2{
margin:0px 20px;
float:left;
padding-bottom:100px;
}
然后将margin-bottom设为负值,将外围的容器(wrapper)的底边框拉上来,由于外围容器的溢出属性为hidden,所以box1和box2的溢出部分将会被裁减掉,如下:
.box1,.box2{
margin:0px 20px;
float:left;
padding-bottom:100px;
margin-bottom:-80px;
}
这样就实现了等高的效果。