CSS:多列等高布局
其实在实际应用中,等高布局的场景并不是很多。当然,很多设计图在背景上的区分要求布局至少是视觉上的等高,甚至有的布局会要求是真正的等高才能实现。比如
https://www.tigerbrokers.com/activity/zhitongche/201510/
中的虚线部分的实现。这个页面实现了视觉等高,又比如
https://www.tigerbrokers.com/activity/ztc201509/
中的轨道部分。为了在拐角部分能够完美的拼接,则需要在切图上有一些更加细节的操作,因此需要实现真正的等高才行。好在该页面只需要在移动端显示,因此使用弹性盒模型来实现就OK了。
该页面的实现并没有完美拼接。主要是当然做的时候没有注意这个问题,因此就随便弄了一些就忽悠过去了。以后我会重新实现这个页面
1. 视觉等高实现之绝对定位
html 代码
<div class="outer">
<div class="left">
<div class="equh"></div>
<div class="left-con">
<p>left</p>
<p>left</p>
<p>left</p>
</div>
</div>
<div class="right">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
css 代码
.outer {
width: 960px;
margin: 0 auto;
border: 1px solid #000;
overflow: hidden;
background-color: green;
color: #fff;
}
.left {
width: 200px;
position: relative;
float: left;
}
.equh {
width: 100%;
height: 999em;
position: absolute;
left: 0;
top: 0;
border-right: 1px solid #000;
background-color: orange;
}
.left-con {
padding: 1em;
position: relative;
z-index: 1;
}
.right {
padding: 1em;
overflow: hidden;
}
实例地址: http://codepen.io/anon/pen/eJXPWo
2. 视觉等高实现之padding-bottom与margin-bottom
核心代码
padding-bottom: 9999px;
margin-bottom: -9999px;
html 代码
<div class="box">
<div class="sub">
<p>a</p>
</div>
<div class="sub">
<p>b</p>
<p>b</p>
</div>
<div class="sub">
<p>c</p>
<p>c</p>
<p>c</p>
</div>
</div>
css 代码
.box {
width: 600px;
overflow: hidden;
margin: 10px auto;
border: 1px solid #888;
}
.sub {
float: left;
width: 30%;
margin-right: 3%;
border: 1px solid orange;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
实例地址: http://codepen.io/anon/pen/WrmYjq
3. 真实等高实现之table-cell
该方案利用了所有单元格高度都相等的特性,不过由于ie6/7不支持该属性,因此略有瑕疵。不过总的来说还是非常不错的方案。
html代码
<div class="box">
<div class="row">
<div class="cell">你一定也有过这种感觉的。当你心事重重,渴望找一个人聊一聊的时候,那个可以聊的人来了,可是你们却并没有聊什么。当然,聊是聊了,可是他聊他的,你也试着开始聊你的,只是到后来,你放弃了……那么,最后的办法就是静下来,啃啮自己的寂寞。或者反过来说,让寂寞来吞噬你。------罗兰《寂寞的感觉》</div>
<div class="cell">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句:一命二运三风水,四积阴功五读书。</div>
<div class="cell">奔波了一天,收到了无数的生日快乐,享受了电影见面会现场各种形式的祝福和礼物,以及场面宏大的生日快乐歌,感谢<西风烈>,感谢支持我的朋友们!现在机场举长寿面祝你们都永远幸福快乐!</div>
</div>
</div>
css 代码
.box {
width: 600px;
margin: 40px auto;
font-size: 12px;
}
.row {
display: table-row;
overflow: hidden;
}
.cell {
display: table-cell;
width: 30%;
padding: 1.6%;
background-color: #f5f5f5;
// 在IE6/7下使用上一方法,添加一些hack即可,这样就能做到全部兼容了
*float: left;
*padding-bottom: 9999px;
*margin-bottom: -9999px;
}
实例地址: http://codepen.io/anon/pen/PZLyLe
4. 真实等高实现之弹性盒模型
如果不考虑兼容性的问题,那么这个就简单多了
html 代码
<div class="box">
<div class="cell">你一定也有过这种感觉的。当你心事重重,渴望找一个人聊一聊的时候,那个可以聊的人来了,可是你们却并没有聊什么。当然,聊是聊了,可是他聊他的,你也试着开始聊你的,只是到后来,你放弃了……那么,最后的办法就是静下来,啃啮自己的寂寞。或者反过来说,让寂寞来吞噬你。------罗兰《寂寞的感觉》</div>
<div class="cell">作为一个被基阿异捅过两个大血窟窿的人。告诉后来的基友们一句:一命二运三风水,四积阴功五读书。</div>
<div class="cell">奔波了一天,收到了无数的生日快乐,享受了电影见面会现场各种形式的祝福和礼物,以及场面宏大的生日快乐歌,感谢<西风烈>,感谢支持我的朋友们!现在机场举长寿面祝你们都永远幸福快乐!</div>
</div>
css 代码
.box {
width: 600px;
margin: 20px auto;
display: flex;
}
.cell {
width: 30%;
border: 1px solid red;
}
实例地址: http://codepen.io/anon/pen/XXGygN
总结
如果需要兼容到ie6/ie7,则使用方法三即可,其中结合了方法二的思路。如果仅仅只是移动端的h5页面的实现,那么毫不犹豫的使用弹性盒模型来实现。简单高效。
当然还有很多各种花样的等高布局啦,不过自我感觉这几种方法已经能够完全满足日常需求,所以我就总结到这里了。