- 采用负margin html:
<div class="box">
<div class="app1">
<p>
阿达撒撒发顺丰看看剧咖啡店
</p>
<p>
阿达撒撒发顺丰看看剧咖啡店
</p>
</div>
<div class="app2">
<p>
上过课大概多少咖喱深V麻烦点卡萨丁
</p>
<p>
当咖啡开工饭是女方
</p>
<p>
当咖啡开工饭是女方
</p>
<p>
当咖啡开工饭是女方
</p>
<p>
当咖啡开工饭是女方
</p>
</div>
<div class="app1">
<p>
阿达撒撒发顺丰看看剧咖啡店
</p>
<p>
阿达撒撒发顺丰看看剧咖啡店
</p>
</div>
</div>
css:
*{
margin: 0;
padding: 0;
}
.box {
margin: auto;
max-width: 600px;
overflow: hidden;/*隐藏起子元素超出的部分*/
/*box的高度有app1和app2中最大的那个决定*/
}
.app1, .app2 {
margin-bottom: -99999px;/*这样足够大*/
padding-bottom: 99999px;
width: 30%;
float: left;
}
.app1 {
background-color: red;
}
.app2 {
background-color: blue;
}
- 采用table-cell,缺点是不能兼容ie8以下 html:
<div class="box">
<div class="son item1">
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="son item2">
<p>456</p>
<p>456</p>
<p>456</p>
</div>
<div class="son item3">
<p>789</p>
<p>789</p>
</div>
</div>
css:
* {
margin: 0;
padding: 0;
}
.box {
display: table;
width: 300px;
}
.son {
display: table-cell;/*不能兼容ie8以下*/
}
.item1{
background-color: red;
}
.item2{
background-color: blue;
}
.item3{
background-color: red;
}