display:table; 兼容 ie8 及以上,和表格元素table ,tr , td,相同特性;由于flex布局兼容在10ie及以上,因此有时候可能需要用到:
//属性说明
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)
table-row 此元素会作为一个表格行显示(类似 <tr>)
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
未知高度,内容自动撑高,内容水平垂直居中,经常碰见的是li内容撑高了ul,但其它li高度不能撑高,边框也不能跟着撑开,很难看,就可以使这个;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;box-sizing: border-box;}
.table{
display: table;
border: 1px solid #e0e0e0;
width: 700px;
border-collapse: collapse;
margin: 50px auto;
}
.tr{
display: table-row;
width: 100%;
}
.td{
display: table-cell;
border: 1px solid #e0e0e0;
vertical-align: middle;
text-align: center;
}
.list li{
width: 20%;
line-height: 30px;
word-break: break-all;
padding: 10px;
}
</style>
</head>
<body>
<div class="table">
<ul class="tr list">
<li class="td">你有逆流而上的勇气,也有漏船载酒的运气。做人做到如此晦气。何不赚个爽快?</li>
<li class="td">我恨这样,但从小就这样——我夸我强,便有人找来比我强的,我怨我惨,便有人数落比我惨的。我活我的,没人在比较。我们像死啦死啦一样活着,用一把叫自己的尺子量这个世界。</li>
<li class="td">一世浮尘,终究是梦</li>
<li class="td">时间就是吞噬自己尾巴的一条蛇,我们身在其中,永不知何所谓始,何所谓终。我们最终只能越来越像我们自己。</li>
<li class="td">年青而苍老的我,年青而苍老的我的祖国</li>
</ul>
</div>
</body>
</html>
效果图:
display:table,可以做出其它很多自适应类型的表格,列表布局等;