题目1:假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px,中间自适应
答案:
①、浮动方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media='screen'>
*{
padding:0;
margin:0;
}
.layout article div{
min-height:100px;
}
.layout.float .left{
float:left;
300px;
background:red;
}
.layout.float .right{
float:right;
300px;
background:blue;
}
.layout.float .center{
background:yellow;
}
</style>
</head>
<body>
<section class="layout float">
<article class='left-right-center'>
<div class='left'></div>
<div class='right'></div>
<div class='center'>
<h1>浮动解决方案</h1>
</div>
</article>
</section>
</body>
</html>
②、定位方式
<style media='screen'> *{ padding:0; margin:0; } .layout article div{ min-height:100px; position:absolute; } .layout.float .left{ left:0; width:300px; background:red; } .layout.float .right{ right:0; width:300px; background:blue; } .layout.float .center{ left:300px; right:300px; background:yellow; } </style>
③、flex布局
*{ padding:0; margin:0; } .layout article{ display:flex; } .layout.float .left{ width:300px; background:red; } .layout.float .right{ width:300px; background:blue; } .layout.float .center{ flex:1; background:yellow; }
④、表格布局
*{ padding:0; margin:0; } .layout article{ width:100%; display:table; height:100px; } .layout article div{ display:table-cell; } .layout.float .left{ width:300px; background:red; } .layout.float .right{ width:300px; background:blue; } .layout.float .center{ background:yellow; }
⑤、网格布局
*{ padding:0; margin:0; } .layout article{ display:grid; width:100%; grid-template-rows:100px; grid-template-columns:300px auto 300px; } article .left{ background:red; } article .center{ background:yellow; } article .left{ background:blue; }
问题扩展：
1、几种方法的优缺点
浮动：需要清除浮动，但兼容性较好
定位:脱离文档流，导致下面的内容都要脱离文档流，但是比较快捷
flex:可以解决上面两个的问题，但是存在兼容性
表格:表格布局的兼容性非常好，有一些历史性的问题
网格：比较新的方式
2、去掉高度已知，那种方式不起作用?
除了flex和表格布局可以之外，其余的都不起作用。