上下定高 中间自适应_前端知识点之三栏布局 左右宽度固定 上下高度固定 中间自适应 几种解决办法...

“题目：假设高度已知，请写出三栏布局，其中左、右栏的宽度为 300px，中间自适应”

面试经常会遇到这样的一道题来考察对页面布局的基本功，相信大部分人都会想到通过 float 和绝对定位这两种方法来实现，但是想要在面试官面前得到更多的认可，还需要列举出更多的解决办法和优缺点：

三栏布局 左右宽度固定 中间自适应 五种解决办法

以下五种解决办法的公共样式

/* 偷懒样式重置 */

html * { margin: 0; padding: 0; }

.layout { margin-top: 20px; }

.layout .container > div { height: 100px; }

第一种：浮动解决方案：

1.兼容性好，

2.三栏高度互不影响，

3.需要清除浮动

.layout.float .left { float: left; width: 300px; background-color: gray; }

.layout.float .right { float: right; width: 300px; background-color: gray; }

.layout.float .center { margin: 0 300px; background-color: #ddd; }

三栏布局 左右宽度固定 中间自适应

浮动解决方案

第二种：绝对定位解决方案：

1.兼容性好，

2.三栏高度互不影响，

3.内容脱离文档流