今天小编跟大家讲解下有关实现三栏布局的5种方式 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关实现三栏布局的5种方式 的相关资料，希望小伙伴们看了有所帮助。
题目：用五种方式实现三栏布局。高度已知，左右两边宽度300px。中间自适应。看到这个题目，我们首先会想起2-3种解决办法。今天我们就来挖一挖到底有多少种方法实现三栏布局。
代码：以下代码可以直接复制运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>三栏布局</title> <style> html * { margin: 0; padding: 0; } .layout{ margin-bottom: 10px; width: 100%; } .layout>div{ min-height: 100px; } .layout>.left{ background-color: red; width: 300px; } .layout>.center{ background-color: black; } .layout>.right{ background-color: blue; width: 300px; } </style></head><body><!--1.float布局--><style> .float .left{ float: left; } .float .right{ float: right; }</style><section class="layout float"> <div class="left"></div> <!--注意：这里要把right写在center之前--> <div class="right"></div> <div class="center"></div></section><!--2.absolute布局--><style> .absolute{ height: 100px; } .absolute>div{ position: absolute; } .absolute .left{ left: 0; } .absolute .center{ left: 300px; right: 300px; } .absolute .right{ right: 0; }</style><section class="layout absolute"> <div class="left"></div> <div class="center"></div> <div class="right"></div></section><!--3.flex布局--><style> .flex{ display: flex; } .flex .center{ flex: 1; }</style><section class="layout flex"> <div class="left"></div> <div class="center"></div> <div class="right"></div></section><!--4.table布局--><style> .table{ display: table; height: 100px; } .table>div{ display: table-cell; }</style><!--表格布局把每个div当成一个表格，所以同一行的表格高度始终是相等的--><section class="layout table"> <div class="left"></div> <div class="center"></div> <div class="right"></div></section><!--5.grid布局--><style> .grid{ display: grid; grid-template-columns: 300px auto 300px; }</style><section class="layout grid"> <div class="left"></div> <div class="center"></div> <div class="right"></div></section></body></html>这里前三种是我们经常用到的布局方式，后两种不常用。table布局虽然不被推荐使用，但是有些时候还是很好用的。grid布局就是把容器分成几行几列的格子，和flex布局类似，但比flex要复杂一些。有兴趣的话可以自己去查阅一下具体用法。
来源：爱蒂网
