稍微有过面试经历的前端人员应该都被问过这样一道题：如何实现三栏布局，左右固定宽度，中间部分随浏览器宽度改变自适应？有几种布局方案？

很大一部分同学很快会说出可以用浮动或定位布局，如果只说出了这两种的话那么很遗憾，这道题你没有达到面试官要求的水平甚至是还不及格。如果你还说出了flex布局，那么刚刚及格。

其实这样看似简单的一道题要回答的全面一点让面试官觉得你对CSS掌握的足够好也不容易。如果还能再说出两三种方案可能就会改变他对你的印象，那就是table（表格）布局、grid（网格）布局。接下来用代码实现：

三栏布局效果图：

1、浮动布局

2、定位布局

3、flex布局

4、table布局

5、grid布局

6、浮动布局的第二种方案

以上几种方案希望小伙伴看到后自己手动敲出来并实际运行一下，好记性不如烂笔头嘛！

当然还可以有定位结合浮动，就不多说了。

如果没猜错的话接下来就是和面试官探讨哪一种方案最优了，可以结合兼容性、项目需求说说自己的见解。

 

如果能给你带来收获，期待您的关注 — web前端周刊

版权声明：本文为wnn0824原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wnn0824/p/10175288.html