CSS实现左边固定宽右边自适应布局怎样做-群英

上一篇：用CSS实现鼠标悬停呈现阴影效果代码是什么下一篇：CSS+HTML实现登录页面的代码是什么

本篇内容介绍了“CSS实现左边固定宽右边自适应布局怎样做”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

这是一道面试题，你有多少种办法呢？

这里我们假设左边名为 left，宽度为 200 px，右边名为 right。即默认

.left {
  width: 200px;
}

我的理解分四大类

flex 布局
- 需设置父元素高度
grid 布局
- 需设置父元素高度
绝对定位
- 双子元素 absolute
  - 不需要设置父元素高度
  - 子元素都设置高度，右边子元素 left：200px + width: 100%
- 左元素 absolute + 右元素 margin-left
  - 不需要设置父元素高度
  - 子元素都设置高度，右边子元素 margin-left: 200px + width: 100%
float 浮动
- 左元素左浮动，右元素不动
  - 无需父元素
  - 左元素需设置宽高和浮动，右元素设置高度即可
- 左元素左浮动，右元素右浮动
  - 无需父元素
  - 左元素设置宽高和左浮动，右元素设置右浮动以及高和宽（width: calc(100% - 200px)）

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 要记得参数比较多）。绝对定位和浮动各有优缺点

各大方法	优缺点	需要什么
flex	布局简单	需要父元素、高度。子项 `flex:1`
grid	布局最简单，但兼容性更现代	只需要父元素设置属性就好
绝对定位	兼容性更高	需要父元素做相对定位、高度
浮动	兼容性更高	不需要父元素，子项都需要宽高