两栏布局

所谓的两栏布局指的是左边固定，右边自适应。

方法1：flat + margin-left

  1. 父盒子设置为BFC：overflow:hidden
  2. 左盒子固定宽度，右盒子margin-left
.father {
    overflow: hidden;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    background-color: red;
}
.right {
    margin-left: 210px;
    height: 200px;
    background-color: blue;
}

方法2：巧用flex: 1

  1. 父盒子设置为flex布局
  2. 左盒子固定宽度。
  3. 右盒子设置为flex:1。
.father {
    display: flex;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    flex: 1;
    height: 200px;
    background-color: blue;
}

方法3：定位

  1. 父盒子设置overflow:hidden+position: relative
  2. 左盒子设置固定宽度
  3. 右盒子设置为position: absolute + left: 左盒子的宽度 + top: 0
.father {
    overflow: hidden;
    position: relative;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    position: absolute;
    height: 200px;
    left: 200px;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: pink;
}

方法4：巧用calc函数

  1. 父盒子overflow: hidden。
  2. 左盒子：float: left，固定宽度。
  3. 右盒子：float: left, 使用calc动态计算剩余宽度。
.father {
    overflow: hidden;
}
.left {
    float: left;
    height: 200px;
    width: 200px;
    background-color: blue;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 200px;
    background-color: pink;
}

双飞翼布局(三栏布局)

所谓的双飞翼布局指的是左右固定，中间自适应。

方法1：两边使用float，中间使用margin

  1. 给父盒子设置overflow: hidden。
  2. 左盒子设置左浮动，右盒子设置右浮动。
  3. 中间盒子设置margin-left和margin-right.
.father {
    overflow: hidden;
}
.left {
    width: 200px;
    height: 200px;
    float: left;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    float: right;
    background-color: aqua;
}

.mid {
    height: 200px;
    margin-right: 220px;
    margin-left: 220px;
    background-color: blue;
}

方法2：父盒子flex布局+左右固定+中间宽度100%。

  1. 父盒子设置为flex。
  2. 左右盒子固定宽高。
  3. 中间盒子宽度为100%。
.father {
    display: flex;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
}
.mid {
    width: 100%;
    margin: 0 20px;
    background-color: aqua;
}

方法3：左右绝对定位，中间margin

  1. 父盒子相对定位，左右盒子都是绝对定位。
  2. 左盒子定位靠左，右盒子定位靠右。
  3. 中间盒子通过margin进行自适应。
.father {
    position: relative;
}
.left,
.right,
.mid {
    height: 200px;
}
.left {
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: red;
}
.right {
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: blue;
}
.mid {
    margin: 0 210px;
    background-color: aqua;
}

参考文档