实现三栏布局的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要复杂一些。有兴趣的话可以自己去查阅一下具体用法。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
