2022-06-18 1 分钟 0.2 k0次访问

display:table-cell在布局上的应用

display: table-cell在布局上的应用

应用一：元素垂直居中

使用table-cell搭配vertical-align可以十分简单地完成元素垂直居中：

<div id="box">
    <div id="content">content goes here...</div>
</div>

#box {
    display: table-cell;
    width: 200px;
    height: 100px;
    vertical-align: middle;
}

应用二：自适应两栏布局

使用table-cell完成“左侧宽度固定，右侧宽度自适应”的两栏布局：

<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;
}

应用三：等高布局

<div id=container>
    <div id="left">content goes here...</div>
    <div id="right">content goes here...</div>
</div>

#container {
	/*另一种实现等高
	display: flex;*/
    display: table-row;
}

#left,
#right {
    display: table-cell;
    width: 100px;
}

应用四：等宽布局

<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;
}