关于javascript:左边固定宽右边自适应的6种方法

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

这里咱们假如右边名为 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 要记得参数比拟多）。相对定位和浮动各有优缺点

float 区别于其余三种，不须要父元素做容器

grid 区别于其余三种，不须要设置子元素（左元素的）宽

相对定位区别于其余三种，它的办法不仅要父元素有高，其子元素也要有高

flex 最简略

附上线上 demo

本文参加了 SegmentFault 思否征文「如何“反杀”面试官？」，欢送正在浏览的你也退出。