CSS table-cell 实现自适应等分区域

阅读(6022)

经常的,会遇到两列或多列平分一行空间,如果存在多行,还需要对齐,最新的 -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 将会失效,如果需要元素间有间隔,需再包多一层元素

Tags: