前几天发了几个视频，视频标题跟本文章标题一样，带大家用五种方式实现了一道有关布局的面试题。现特此附上源码。如果有想看整个内容介绍的，可以根据本标题或选择关注本人，或搜索标题内容，选择视频也可以看到更详细内容。
面试题的要求如下：
假设高度已知，请写出三栏布局，其中左栏，右栏各为300px,中间自适应，要求用尽可能多的方式实现这个布局。
在此我用五种方式实现了这个题目的要求，我在视频里面详情介绍了。下面贴出整个实现源码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五种方式实现布局</title>
<style>
*{
padding:0;
margin:0
}
.layout div{
height:100px;
}
.layout{
margin-bottom:20px;
}
</style>
</head>
<body>
<!-- 之一种布局 浮动布局 -->
<section class="layout float">
<style>
.float .left{
float:left;
width:300px;
background-color: red;
}
.float .right{
float:right;
width:300px;
background-color: green;
}
.float .center{
background-color:yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>这是浮动布局</h1>
<p>这是浮动布局</p>
</div>
</article>
</section>
<!-- 第二种布局 绝对定位 父相子绝-->
<section class="layout absolute">
<style>
.absolute .left-center-right{
position: relative;
}
.absolute .left-center-right >div{
position: absolute;
}
.absolute .left{
width:300px;
left:0;
background-color: red;
}
.absolute .center{
left:300px;
right:300px;
background-color: yellow;
}
.absolute .right{
right:0;
width:300px;
background-color: green;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>这绝对定位布局</h1>
<p>这绝对定位布局</p>
</div>
<div class="right"></div>
</article>
</section>
<!-- 第三种布局 flexBox布局 -->
<section class="layout flex">
<style>
.flex{ margin-top:140px; }
.flex .left-center-right{ display: flex; }
.flex .left{ width:300px; background-color: red; }
.flex .center{ flex:1; background-color: yellow; }
.flex .right{ width:300px; background-color: green; }
</style>
<article class='left-center-right'>
<div class="left"></div>
<div class="center">
<h1>这flexBox布局</h1>
<p>这flexBox布局</p>
</div>
<div class="right"></div>
</article>
</section><!-- 这是第四种布局解决方案 表格 布局-->
<section class="layout table">
<style>
.table .left-center-right{ display: table; width:100%; height:100px; }.table .left-center-right>div{ display: table-cell; }.table .left{ width:300px; background-color: red; }
.table .center{ width:auto; background-color: yellow; }
.table .right{ width:300px; background-color: green; }
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>这是表格布局解决方案</h1>
<p>这是表格布局解决方案</p>
</div>
<div class="right"></div>
</article>
</section><!-- 第五种解决方案 网格布局 -->
<section class="layout grid">
<style>
.grid .left-center-right{
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}.grid .left{ background-color: red; }
.grid .center{ background-color: yellow; }
.grid .right{ background-color: green; }
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>这是网格布局解决方案</h1>
<p>这是网格布局解决方案</p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
附上最终效果图
