“题目：假设高度已知，请写出三栏布局，其中左、右栏的宽度为 300px，中间自适应”
面试经常会遇到这样的一道题来考察对页面布局的基本功，相信大部分人都会想到通过 float 和绝对定位这两种方法来实现，但是想要在面试官面前得到更多的认可，还需要列举出更多的解决办法和优缺点：
三栏布局 左右宽度固定 中间自适应 五种解决办法
以下五种解决办法的公共样式
<style>
/* 偷懒样式重置 */
html * { margin: 0; padding: 0; }
.layout { margin-top: 20px; }
.layout .container > div { height: 100px; }
</style>
第一种：浮动解决方案：
1.兼容性好，
2.三栏高度互不影响，
3.需要清除浮动
<section class="layout float">
<style>
.layout.float .left { float: left; width: 300px; background-color: gray; }
.layout.float .right { float: right; width: 300px; background-color: gray; }
.layout.float .center { margin: 0 300px; background-color: #ddd; }
</style>
<article class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<p>三栏布局 左右宽度固定 中间自适应</p>
<p>浮动解决方案</p>
</div>
</article>
</section>
第二种：绝对定位解决方案：
1.兼容性好，
2.三栏高度互不影响，
3.内容脱离文档流
4.适用范围不广
<section class="layout absolute">
<style>
.layout.absolute .container { height: 100px; position: relative; }
.layout.absolute .left { position: absolute; left: 0; top: 0; width: 300px; background-color: gray; }
.layout.absolute .right { position: absolute; right: 0; top: 0; width: 300px; background-color: gray; }
.layout.absolute .center { position: absolute; left: 300px; right: 300px; top: 0; background-color: #ddd; }
</style>
<article class="container">
<div class="left"></div>
<div class="center">
<p>三栏布局 左右宽度固定 中间自适应</p>
<p>绝对定位解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
第三种： flexbox 解决方案：
1.适用于移动端布局，
2.使用简单
3.兼容性较差，
4.如果未设置高度，三栏高度由内容撑开，始终等高
<section class="layout flexbox">
<style>
.layout.flexbox .container { display: flex; }
.layout.flexbox .left { width: 300px; background-color: gray; }
.layout.flexbox .right { width: 300px; background-color: gray; }
.layout.flexbox .center { flex: 1; background-color: #ddd; }
</style>
<article class="container">
<div class="left"></div>
<div class="center">
<p>三栏布局 左右宽度固定 中间自适应</p>
<p>flexbox 解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
第四种： table 解决方案：
1.兼容性好
2.如果未设置高度，三栏高度由内容撑开，始终等高
3.设置 vertical:middle 可以使内联元素/文本内容垂直居中
4.三栏高度由内容撑开，始终等高
<section class="layout table">
<style>
.layout.table .container { display: table; width: 100%; }
.layout.table .container > div { display: table-cell; }
.layout.table .left { width: 300px; background-color: gray; }
.layout.table .right { width: 300px; background-color: gray; }
.layout.table .center { background-color: #ddd; }
</style>
<article class="container">
<div class="left"></div>
<div class="center">
<p>三栏布局 左右宽度固定 中间自适应</p>
<p>table 解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
第五种： Grid 解决方案:
1.兼容性很差，只支持高版本的浏览器
2.讲真，这个我不太懂，后续学习下。
<section class="layout grid">
<style>
.layout.grid .container { display: grid; grid-template-columns: 300px auto 300px; }
.layout.grid .left { background-color: gray; }
.layout.grid .right { background-color: gray; }
.layout.grid .center { background-color: #ddd; }
</style>
<article class="container">
<div class="left"></div>
<div class="center">
<p>三栏布局 左右宽度固定 中间自适应</p>
<p>grid 解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
效果图：
QQ图片20190105152429.png
三栏布局 上下高度固定 中间自适应 四种解决方案
第一种：绝对定位解决方案：
<style>
/* 偷懒样式重置 */
html * { margin: 0; padding: 0; }
html,
body { width: 100%; height: 100%; }
.layout { position: relative; width: 100%; height: 100%; }
.layout .header,
.layout .footer { height: 100px; width: 100%; position: absolute; background-color: #ddd; }
.layout .header { top: 0; }
.layout .footer { bottom: 0; }
.layout .content { position: absolute; top: 100px; right: 0; left: 0; bottom: 100px; background-color: #999; }
</style>
<!-- 绝对定位 解决方案 -->
<section class="layout">
<header class="header">头部</header>
<article class="content">
<p>中间部分 高度自适应</p>
<p>绝对定位 解决方案</p>
</article>
<footer class="footer">底部</footer>
</section>
第二种： flex解决方案
<style>
/* 偷懒样式重置 */
html * { margin: 0; padding: 0; }
html,
body { width: 100%; height: 100%; }
.layout { width: 100%; height: 100%; display: flex; flex-direction: column; }
.layout .header,
.layout .footer { height: 100px; width: 100%; background-color: #ddd; }
.layout .content { flex: 1; background-color: #999; }
</style>
<!-- flex 解决方案 -->
<section class="layout">
<header class="header">头部</header>
<article class="content">
<p>中间部分 高度自适应</p>
<p>flex 解决方案</p>
</article>
<footer class="footer">底部</footer>
</section>
第三种： table解决方案
<style>
/* 偷懒样式重置 */
html * { margin: 0; padding: 0; }
html,
body { width: 100%; height: 100%; }
.layout { width: 100%; height: 100%; display: table; flex-direction: column; }
.layout .header,
.layout .footer { display: table-row; height: 100px; width: 100%; background-color: #ddd; }
.layout .content { display: table-row; background-color: #999; }
</style>
<!-- table 解决方案 -->
<section class="layout">
<header class="header">头部</header>
<article class="content">
<p>中间部分 高度自适应</p>
<p>table 解决方案</p>
</article>
<footer class="footer">底部</footer>
</section>
第四种：grid解决方案
<style>
/* 偷懒样式重置 */
html * { margin: 0; padding: 0; }
html,
body { width: 100%; height: 100%; }
.layout { width: 100%; height: 100%; display: grid; grid-template-rows: 100px auto 100px; }
.layout .header,
.layout .footer { background-color: #ddd; }
.layout .content { background-color: #999; }
</style>
<!-- grid 解决方案 -->
<section class="layout">
<header class="header">头部</header>
<article class="content">
<p>中间部分 高度自适应</p>
<p>grid 解决方案</p>
</article>
<footer class="footer">底部</footer>
</section>
嗯，对的，和上面的横向排列类似，就是竖直方向浮动不再能用移动端比较，这种需求在常见，需要上下固定，中间部分能滚动，
左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应
还有常见的两栏布局也同样适用以上布局方法
以上为学习笔记，参考资料： 慕课网的课程
源码查看
github https://github.com/liguoyou/layout-demos
或者
码云 https://gitee.com/liguoyou/layout-demos
网友评论