五种实现三栏布局的方式，左右宽度固定中间自适应（一）—

五种实现三栏布局的方式，左右宽度固定中间自适应（一）——面试常考点

本文主要是介绍五种实现三栏布局的方式，左右宽度固定中间自适应（一）——面试常考点，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
<head><title>Layout</title><style type="text/css">html,*{margin:0;padding: 0; }section{margin-top: 20px;}/*浮动定位*/.layout-float div{min-height: 100px;}.layout-float .left{width: 300px;float: left;background-color: red;}.layout-float .right{width: 300px;float:right;background-color: green;}.layout-float .center{background-color: yellow;}/*绝对定位*/.layout-absolute{position: relative;}.layout-absolute div{min-height: 100px;position: absolute;}.layout-absolute .left{width: 300px;left: 0;background-color: red;}.layout-absolute .right{width: 300px;right: 0;background-color: green;}.layout-absolute .center{/*通过左右定位 自适应宽度*/left: 300px;right: 300px;background-color: yellow;}/*flex*/.layout-flex{display: flex;margin-top: 140px;}.layout-flex div{min-height: 100px;}.layout-flex .left{width: 300px;background-color: red;}.layout-flex .right{width: 300px;background-color: green;}.layout-flex .center{flex:1;background-color: yellow;}/*table*/.layout-table{width: 100%;display: table;}.layout-table div{display: table-cell;height: 100px;}.layout-table .left{width: 300px;background-color: red;}.layout-table .right{width: 300px;background-color: green;}.layout-table .center{background-color: yellow;}/*grid*/.layout-grid{display: grid;grid-template-rows: 100px; /*行高*/grid-template-columns: 300px auto 300px;/*三栏 宽度*/		}.layout-grid .left{background-color: red;}.layout-grid .right{background-color: green;}.layout-grid .center{background-color: yellow;}</style>
</head>
<body><section><article class="layout-float"><div class="left"></div><div class="right"></div><div class="center"><h1>浮动解决方案</h1>三栏布局1、左边左浮动2、右边由浮动3、中间自适应</div></article></section><section><article class="layout-absolute"><div class="left"></div><div class="center"><h1>绝对定位解决方案</h1>1、左边left为02、右边right为03、中间left为300px</div><div class="right"></div>	</article></section><section><article class="layout-flex"><div class="left"></div><div class="center"><h1>flex解决方案</h1>flex实现三栏布局</div><div class="right"></div>	</article></section><section><article class="layout-table"><div class="left"></div><div class="center"><h1>table解决方案</h1>table实现三栏布局</div><div class="right"></div>	</article></section><section><article class="layout-grid"><div class="left"></div><div class="center"><h1>网格解决方案</h1>网格实现三栏布局</div><div class="right"></div>	</article></section>
</body>
</html>