转

css实现左边div固定宽度，右边div自适应撑满剩下的宽度。左边定宽，左边固定，右边自适应。flex 占剩下的宽度

4371人阅读 2022/10/8 13:33 总访问：717418 评论：0 收藏：0 手机

分类: 前端

### 这是一道面试题，你有多少种办法呢？

这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认
```
.left {
  width: 200px;
}
```
### 我的理解分四大类

**flex 布局**
- 需设置父元素高度

>AJ补充：其实只需要设置min-height的一个值就行了，高度比这个高也是可以自适应高度的。或者不设置，直接设置它的子容器高度也是可以的

**grid 布局**
- 需设置父元素高度

**绝对定位**
- 双子元素 absolute
  不需要设置父元素高度
  子元素都设置高度，右边子元素 left：200px + width: 100%
- 左元素 absolute + 右元素 margin-left
  不需要设置父元素高度
  子元素都设置高度，右边子元素 margin-left: 200px + width: 100%

** float 浮动**
- 左元素左浮动，右元素不动
无需父元素
左元素需设置宽高和浮动，右元素设置高度即可

- 左元素左浮动，右元素右浮动
无需父元素
左元素设置宽高和左浮动，右元素设置右浮动以及高和宽（width: calc(100% - 200px)）

**补充：其实还可以使用其他布局框架实现这种布局，比如vue element ui的Layout 布局**

可以通过它提供的24分栏，迅速简便地创建布局。


### flex 布局
需要一个父元素做 flex 布局，且需要给它一个高度（撑开容器）
```
.father {
  display: flex;
  height: 200px;
}
.right {
  flex: 1;
}
```

### grid 布局
高级的布局方式，子元素不需要设置宽度，单单设置父元素属性即可。
```
.grid {
  display: grid;
  grid-template-columns: 200px 100%;
  height: 200px;
}
```

### 双子元素 + absolute
需要给子元素设置宽高，不然撑不起来。右元素设置left: 200px
```
.father {
  position: relative;
  height: 200px;
}
.left {
  position: absolute;
  height: 200px;
}
.right {
  position: absolute;
  left: 200px;
  height: 200px;
  width: 100%;
}
```
左元素 absolute + 右元素 margin-left
```
.father {
  position: relative;
  height: 200px;
}
.left {
  position: absolute;
  width: 200px;
  height: 200px;
}
.right {
  width: 100%;
  height: 200px;
  margin-left: 200px;
}
```
### 无父元素 + 左元素左浮动，右元素不动
前两种都需要有个父元素，但浮动不需要
左边浮动，下一个元素独占位置，并排一行
同样，需要设置高度，子元素才能撑开
```
.left {
  float: left;
  height: 200px;
}
.right {
  height: 200px;
}
```

### 无父元素 + 左边左浮动，右边有浮动
浮动不需要父元素，浮动就区别于正常文档流
我的理解是正常文档流是二维层面，而浮动相当于成了三维，区别于 Z 轴
右边元素有浮动不够，还需要设置宽度
```
.left {
  float: left;
  height: 200px;
}

.right {
  float: right;
  height: 200px;
  width: calc(100% - 200px);
}
```
只要是 float 实现此功能的，都不需要父元素，以及自身都需要设置高度

### 总结
简单来说，实现布局最好的方式是 flex，简单兼容现代浏览器和机型。当然，我是因为还没有学 grid（但 grid 要记得参数比较多）。绝对定位和浮动各有优缺点

float 区别于其他三种，不需要父元素做容器
grid 区别于其他三种，不需要设置子元素（左元素的）宽
绝对定位区别于其他三种，它的方法不仅要父元素有高，其子元素也要有高
flex 最简单


作者：Johan约翰
链接：https://www.zhihu.com/question/37208845/answer/2430865917
来源：知乎

还可以参考：
https://zhuanlan.zhihu.com/p/28728224

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

TeachingNote

这一生多幸运赶上过你.

博主信息

排名

文章

粉丝

文章类别

.net 38篇

后端 8篇

ORM 16篇

前端 64篇

随笔 14篇

移动开发 6篇

数据库 7篇

英语 3篇

rabbitmq 1篇

.net core 7篇

unity 1篇

k8s 1篇

云服务 1篇

DDD 1篇

网络 1篇

css实现左边div固定宽度，右边div自适应撑满剩下的宽度。左边定宽，左边固定，右边自适应。flex 占剩下的宽度

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}