1.前言
用css实现“两边定宽，中间自适应的三栏布局”这个问题应该是在前端面试中被面试官提问到的高频问题了，一般当面试者写出一种实现方法之后，面试官还会问你还有没有别的方法，尽量多的写出几种实现方法。
2.实现原理
要想实现这种“两边定宽，中间自适应的三栏布局”其实也不难，无外乎把握住以下几点：
- 要想中间自适应，那么中间的div不能设置宽度width，这样宽度就会随着浏览器窗口自适应。
- 由于div是块级元素，要想三个div处于同一行，那么两边的div就要脱离文档流。
- CSS3的flex伸缩布局。
- 表格table布局。
- 网格布局。
3.具体实现
下面就按照上面所说的实现原理，列举以下几种实现方式：
3.1 浮动解决方案
<style> ???????.layout-float .right{ ???????????float: right; ???????????width: 300px; ???????????height: 100px; ???????????background-color: red; ???????} ???????.layout-float .left{ ???????????float: left; ???????????width: 300px; ???????????height: 100px; ???????????background-color: blue; ???????} ???????.layout-float .center{ ???????????height: 100px; ???????????background-color: yellow; ???????}</style><div class="right"></div><div class="left"></div><div class="center"><h1>浮动解决方案</h1></div>3.2 绝对定位解决方案
<style> ???????.layout-absolute .right{ ???????????width: 300px; ???????????height: 100px; ???????????right: 0px; ???????????position: absolute; ???????????background-color: red; ???????} ???????.layout-absolute .left{ ???????????width: 300px; ???????????height: 100px; ???????????left: 0px; ???????????position: absolute; ???????????background-color: blue; ???????} ???????.layout-absolute .center{ ???????????left: 300px; ???????????right: 300px; ???????????height: 100px; ???????????position: absolute; ???????????background-color: yellow; ???????}</style><div class="left"></div><div class="center"><h1>绝对定位解决方案</h1></div><div class="right"></div>3.3 Flex伸缩布局解决方案
<style> ???????.layout-flex .left-center-right{ ???????????display: flex; ???????} ???????.layout-flex ?.left-center-right .left{ ???????????width: 300px; ???????????height: 100px; ???????????background-color: blue; ???????} ???????.layout-flex ?.left-center-right .center{ ???????????flex: 1; ???????????background-color: yellow; ???????} ???????.layout-flex ?.left-center-right .right{ ???????????width: 300px; ???????????height: 100px; ???????????background-color: red; ???????}</style><div class="left-center-right"> ???<div class="left"></div> ???<div class="center"><h1>Flex伸缩布局解决方案</h1></div> ???<div class="right"></div></div>3.4 表格布局解决方案
<style> ???????.layout-table .left-center-right{ ???????????width: 100%; ???????????display: table; ???????????height: 100px; ???????} ???????.layout-table .left-center-right>div{ ???????????display: table-cell; ???????} ???????.layout-table .right{ ???????????width: 300px; ???????????height: 100px; ???????????background-color: red; ???????} ???????.layout-table .left{ ???????????width: 300px; ???????????height: 100px; ???????????background-color: blue; ???????} ???????.layout-table .center{ ???????????height: 100px; ???????????background-color: yellow; ???????}</style><div class="left-center-right"> ???<div class="left"></div> ???<div class="center"><h1>表格布局解决方案</h1></div> ???<div class="right"></div></div>3.5 网格布局解决方案
<style> ???????.layout-grid .left-center-right{ ???????????width: 100%; ???????????display: grid; ???????????grid-template-rows: 100px; ???????????grid-template-columns: 300px auto 300px; ???????} ???????.layout-grid .right{ ???????????background-color: red; ???????} ???????.layout-grid .left{ ???????????background-color: blue; ???????} ???????.layout-grid .center{ ???????????background-color: yellow; ???????}</style><div class="left-center-right"> ???<div class="left"></div> ???<div class="center"><h1>网格布局解决方案</h1></div> ???<div class="right"></div></div>4. 效果图
（完）
如何用CSS实现中间自适应，两边定宽三栏布局
原文地址：https://www.cnblogs.com/wangjiachen666/p/9462858.html