因为HTML流式布局的特性，水平分栏与垂直对齐的实现都不是那么的直观。尤其自适应三栏布局应用非常广泛，通常有两列是固定宽度的，另外一列根据屏幕大小自适应宽度(比如百度音乐、百度云等)。自适应三栏布局可以说是前端工程师面试的必选题目。

效果图

水平分栏有多种实现方式，最简单直观的是基于table的实现，这便是本文主要讨论的内容。先看我们要实现的效果图：

HTML框架

Left content

Center content

Right content

首先声明一个

。而这三列才是我们想要的内容，分别为左边栏、中间部分、右边栏。

CSS

接着稍微来点CSS，让我们能够看得更清楚：


table{
height: 350px;
margin: 10px;
border: 1px solid grey;
}
#center {
width: 100%;
}
#left, #right {
min-width: 200px;
background-color: lightyellow;
}


这样便达到了截图中的效果。Table自适应布局的关键在于自适应的那一栏宽度应当设置为100%，固定宽度的两栏应设置min-width(注意不是width！)。

Div模拟Table

看官想必已经发现了，我们要显示的只是三栏内容，却添加了很多语义并不直观的

等元素。我们完全可以通过没有语义的



Left content


Center content


Right content



我们只需要设置三栏的display属性为table-cell：


.table-layout div{
display: table-cell;
}
.table-layout{
height: 350px;
margin: 10px;
border: 1px solid grey;
}


这时#left和#right(黄色部分)并没有充满整个父容器.table-layout，如下图：

这是因为如果一个元素被设置为table-cell，浏览器会在渲染时给它外层包装一个table-row以及table。但这个table是嵌入在div.table-layout里面的，并未充满整个div.table-layout的高度。我们只需要将div.table-layout设置为table，浏览器便不会包装那个table了：


.table-layout{
display: table;
}


至此已经达到了和

优缺点

Table布局的优点就是实现简单，还可以通过Table嵌套来实现复杂的布局。但Table的问题也很显著：布局死板。Table是非常可靠的布局方式，一个


永远不会与另一个

有交错和遮挡。

冗余的HTML。随着HTML和CSS相关规范的演进，我们倾向于认为样式应当由CSS来处理，而HTML应当尽量保持有语义。

大表格的性能问题。我们知道HTML是流式布局的，后面的元素理论上讲不会影响前面元素的渲染，然而Table中后续行的列宽将会引起前面行的回流和重绘。

因此推荐本文只供学习和面试用。