以前有一道经典面试题，问的频率比较高，就是实现一个左侧固定，右侧自适应的布局。
因为前端开发都会接触到这种布局，尤其是一些后台管理系统。在此总结一下常用的一些写法。
1.使用flex
容器元素display设为flex，左侧元素宽度固定，右侧flex值为1
2.使用浮动，并结合margin
父元素设置padding-left，值为左侧元素的宽度，因为要使用浮动，需要清除浮动，使用overflow：hidden，创建一个BFC
左侧元素左浮动，左侧宽度固定，且margin-left设为负值，即可将元素向左移动
右侧元素宽度设为100%即可
3.使用浮动，结合calc函数
calc 函数可以对不同单位的宽度进行计算
设置父元素overflow:hidden, 确保父元素会被子元素撑开
两个子元素做浮动，左边元素固定宽度，右侧元素宽度设为calc(100% - 固定宽度)
使用flex是最简单的，而且目前flex的兼容性已经很棒了，建议使用。
详细代码可以参考示例。链接: https://pan.baidu.com/s/1yXdr9W1g29i3J5f4SPy7iQ 提取码: kahk
网友评论