由于HTML流布局的特点，水平和垂直对齐的实现不那么直观。 特别是对3列布局的适应非常广泛，通常2列为固定宽度，另1列根据画面尺寸来适应宽度(例如百度音乐、百度云等)。 适应三排布局可以说是前端工程师面试的必备主题。
效果图表
水平专栏有多种实现方式，最简单直观的是基于table的实现，这是本文主要讨论的内容。 首先，让我们来看看我们实现的效果图：
HTML框架
leftcontentcentercontentrightcontent首先是。 而这三列才是我们想要的内容，分别是左栏、中央部分、右栏。 CSS
接下来，让我们稍微看看CSS。
选项卡{
height: 350px；
margin: 10px；
border : 1px固态灰色；
}
#中心{
width: 100%；
}
#left，#right {
最小窗口： 200 px；
背景色：灯光黄色；
}
这样可以得到截图的效果。 Table自适应布局的关键是将自适应列的宽度设置为100%，并将固定宽度的两列设置为最小宽度(请参见)。
Div模拟表
你可能注意到了，我们想表示的只有三栏的内容，但是添加很多意思是不直观的
等元素。 可以在不使用语义的情况下简化html。 您只需将leftcontentcentercontentrightcontent 3列的显示属性设置为table-cell。
. table-layout div{
display :表蜂窝；
}
. table-layout{
height: 350px；
margin: 10px；
border : 1px固态灰色；
}
此时，#left和#right (黄色部分)未充满整个母容器. table-layout。 如下图所示。
这是因为如果元素设置为table-cell，则浏览器在渲染时会在外部包装table-row和table。 但是，该表嵌入在div.table-layout中，而不是充满整个div.table-layout的高度。 只要将div.table-layout设置为table，浏览器就不会包装该table。
. table-layout{
显示：表；
}
这样就和平了
优缺点
Table布局的优点是实现简单，可以通过Table嵌套实现复杂的布局。 但是，Table的问题也很突出。 布局太紧了。 Table是非常可靠的布局方式，一个
不会与他人擦肩而过或被遮挡。 冗馀的HTML。 随着HTML和CSS相关规范的发展，我们倾向于认为样式应该由CSS处理，而HTML应该尽可能有意义。
大表的性能问题。 HTML是一个流布局，我们知道后续元素理论上不影响上一个元素的渲染，但Table中后续行的列宽会导致上一行的回流和重绘。
因此，我建议本论文只用于学习和面试。
欢迎使用天码营微信公众号： TMY-EDU
小编重点推荐：天码营网站