display: table-cell在布局上的应用
应用一：元素垂直居中
使用table-cell搭配vertical-align可以十分简单地完成元素垂直居中：
1
2
3
4
5
6
7
8
9
10
| <div id="box">
<div id="content">content goes here...</div>
</div>
#box {
display: table-cell;
width: 200px;
height: 100px;
vertical-align: middle;
}
|
应用二：自适应两栏布局
使用table-cell完成“左侧宽度固定，右侧宽度自适应”的两栏布局：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="container">
<div id="left">content goes here...</div>
<div id="right">content goes here...</div>
</div>
#left {
float: left;
width: 150px;
}
#right {
display: table-cell;
width: 9999px;
}
#container {
overflow: auto;
}
|
应用三：等高布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id=container>
<div id="left">content goes here...</div>
<div id="right">content goes here...</div>
</div>
#container {
display: table-row;
}
#left,
#right {
display: table-cell;
width: 100px;
}
|
应用四：等宽布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div id="container">
<div class="cell">content goes here...</div>
<div class="cell">content goes here...</div>
<div class="cell">content goes here...</div>
</div>
#container {
display: table;
table-layout: fixed;
width: 450px;
}
.cell {
display: table-cell;
}
|
display:table-cell在布局上的应用
