Skip to content

已知左边固定宽度,右边自适应

这是一道面试题,你有多少种办法呢?

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

css
.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 布局,且需要给它一个高度(撑开容器)

css
.father {
    display: flex;
    height: 200px;
}
.right {
    flex: 1;
}

grid 布局

高级的布局方式,子元素不需要设置宽度,单单设置父元素属性即可。

css
.grid {
    display: grid;
    grid-template-columns: 200px 100%;
    height: 200px;
}

双子元素 + absolute

需要给子元素设置宽高,不然撑不起来。右元素设置left: 200px

css
.father {
    position: relative;
    height: 200px;
}
.left {
    position: absolute;
    height: 200px;
}
.right {
    position: absolute;
    left: 200px;
    height: 200px;
    width: 100%;
}

左元素 absolute + 右元素 margin-left

css
.father {
    position: relative;
    height: 200px;
}
.left {
    position: absolute;
    width: 200px;
    height: 200px;
}
.right {
    width: 100%;
    height: 200px;
    margin-left: 200px;
}

无父元素 + 左元素左浮动,右元素不动

前两种都需要有个父元素,但浮动不需要

左边浮动,下一个元素独占位置,并排一行

同样,需要设置高度,子元素才能撑开

css
.left {
    float: left;
    height: 200px;
}
.right {
    height: 200px;
}

无父元素 + 左边左浮动,右边有浮动

浮动不需要父元素,浮动就区别于正常文档流

我的理解是正常文档流是二维层面,而浮动相当于成了三维,区别于 Z 轴

右边元素有浮动不够,还需要设置宽度

css
.left {
    float: left;
    height: 200px;
}

.right {
    float: right;
    height: 200px;
    width: calc(100% - 200px);
}

只要是 float 实现此功能的,都不需要父元素,以及自身都需要设置高度

总结

简单来说,实现布局最好的方式是 flex,简单兼容现代浏览器和机型。当然,我是因为还没有学 grid(但 grid 要记得参数比较多)。绝对定位和浮动各有优缺点

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

float 区别于其他三种,不需要父元素做容器

grid 区别于其他三种,不需要设置子元素(左元素的)宽

绝对定位区别于其他三种,它的方法不仅使父元素要有高,其子元素也要有高

flex 最简单

附上线上 demo