【CSS面试题】实现两列布局，左侧固定，右侧自适应

作为一个前端开发，CSS 布局是重中之重，虽然现在很多从事后端管理系统开发，习惯性使用 UI 框架，例如 element-ui，antd design，material-ui 等，左右布局已经自动帮你实现了，但是还是需要知道其中原理，本文介绍几种实现两列布局的思路。

要求

实现一个左侧 240px，右侧自适应，下面列举四种方法，已经够用啦！如果面试官还为难你，直接走人！！👿

使用 calc 计算

现在几乎所有的浏览器都支持 calc 计算方法，calc 可以实现加减乘除等计算表达式

.left {
  display: inline-block;
  width: 240px;
}
.right {
  display: inline-block;
  width: calc(100% - 240px);
}

使用 float 浮动

左侧浮动 float: left ，右侧可以是 padding-left，margin-left，calc，float: left

.left {
  float: left;
  width: 240px;
}
.right {
  padding-left: 240px;
}

.left {
  float: left;
  width: 240px;
}
.right {
  margin-left: 240px;
}

flex 布局

.content {
  display: flex;
}
.left {
  width: 240px;
}
.right {
  flex: 1;
}

grid 布局

.content {
  display: grid;
  grid-template-columns: 240px 1fr;
}