CSS table-cell 实现自适应等分区域
阅读(6611)经常的,会遇到两列或多列平分一行空间,如果存在多行,还需要对齐,最新的 -webkit-flex 本来是最好的实现方案,但安卓下还只是支持旧的 -webkit-box,而 -webkit-box 的表现跟表格一样,会自适应,但不会等分,所以,较好的方式是用 table-cell
,代码如下:
html:
<ul class="table-equal">
<li>我是自适应等分</li>
<li>我是自适应等分</li>
<li>我是自适应等分</li>
</ul>
css:
.table-equal {
display: table;
table-layout: fixed;
width: 100%;
}
.table-equal li {
display: table-cell;
vertical-align: top;
}
注:用了
table-cell
之后,margin 将会失效,如果需要元素间有间隔,需再包多一层元素