两列布局：6种方法

Posted 2021-02-02 lingxiangli

面试过程中总会文档两列布局，左边等宽，右边自适应几种方法？以下提供6种为君解忧

<div id="wrap">
  <div id="left"></div>
  <div id="right"></div>
</div>

需求就是左侧定宽，右侧自适应。（height先不用管）
方法一：双inline-block
#wrap{
  width: 100%;
  font-size: 0;
}
#left{
  width: 200px;
  height: 100px;
  display: inline-block;
}
#right{
  height: 100px;
  width: calc(100% - 200px);
  display: inline-block;
}

缺点：

为消除html中空格的影响需要把父级的font-size设为0
如果两边高度不一样，需要加vertical-align: top


注意：calc表达式内运算符两边要有空格

方法二：双float
#left{
  float: left;
  width: 200px;
  height: 100px;
}
#right{
  float: left;
  height: 100px;
  width: calc(100% - 200px);
}

本方案和双inline-block方案原理相同，都是通过动态计算宽度来实现自适应。但是，由于浮动的block元素在有空间的情况下会依次紧贴，排列在一行，所以无需设置display: inline-block;，自然也就少了顶端对齐，空格字符占空间等问题。

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

缺点：

父元素需要清除浮动

方法三： float+margin-left
#left{
  float: left;
  width: 200px;
  height: 100px;
}
#right{
  height:100px;
  margin-left: 200px;
}


上面两种方案都是利用了CSS的calc()函数来计算宽度值。下面两种方案则是利用了block级别的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。block级别的元素会认为浮动的元素不存在，但是inline级别的元素能识别到浮动的元素。

缺点：需要清除浮动,需要计算margin-left
方法四：absolute+margin-left
#left{
  position: absolute;
  width: 200px;
  height: 100px;
}
#right{
  height: 100px;
  margin-left: 200px;
}

缺点：使用了绝对定位，若是用在某个div中，需要更改父容器的position。
方法五：float+BFC
#wrap{
  overflow:hidden;
}
#left{
  width: 200px;
  height: 100px;
  float: left;
}
#right{
  height: 100px;
  margin-left: 0;
  overflow: auto;
}

这种方法同样是利用了左侧浮动，但是右侧盒子通过overflow:auto;形成了BFC，因此右侧的盒子不会被浮动的元素重叠。
缺点：父元素需要清除浮动。
方法六：flex布局
#wrap{
  display: flex;
}
#left{
  width: 200px;
  height: 100px;
}
#right{
  height: 100px;
  flex: 1;
}