题目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; ???????????width:300px; ???????????background:red; ???????} ???????.layout.float .right{ ???????????float:right; ???????????width: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和表格布局可以之外，其余的都不起作用。
js面试题-----页面布局
原文地址：http://www.cnblogs.com/diasa-fly/p/7506142.html