两栏布局
所谓的两栏布局指的是左边固定，右边自适应。
方法1：flat + margin-left
- 父盒子设置为BFC：overflow:hidden
- 左盒子固定宽度，右盒子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
- 父盒子设置为flex布局
- 左盒子固定宽度。
- 右盒子设置为flex:1。
.father {
display: flex;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
flex: 1;
height: 200px;
background-color: blue;
}
方法3：定位
- 父盒子设置overflow:hidden+position: relative
- 左盒子设置固定宽度
- 右盒子设置为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函数
- 父盒子overflow: hidden。
- 左盒子：float: left，固定宽度。
- 右盒子：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
- 给父盒子设置overflow: hidden。
- 左盒子设置左浮动，右盒子设置右浮动。
- 中间盒子设置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%。
- 父盒子设置为flex。
- 左右盒子固定宽高。
- 中间盒子宽度为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
- 父盒子相对定位，左右盒子都是绝对定位。
- 左盒子定位靠左，右盒子定位靠右。
- 中间盒子通过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;
}