前言
需求:实现左右两栏固定宽度,中间一栏自适应宽度。
以下是总结的7种方法可以实现这个需求。
1. 浮动float + calc()
核心思想:先使用浮动将三栏水平排列,然后对中间栏使用calc()
函数来计算去除左右两栏固定宽度后剩余的宽度。
HTML结构:
<div class="container">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
CSS样式:
div {
height: 100px;
}
.left {
float: left;
width: 200px;
background-color: red;
}
.middle {
float: left;
width: calc(100% - 400px);
background-color: green;
}
.right {
float: right;
width: 200px;
background-color: blue;
}
2. 浮动float + margin 负值
核心思想:利用浮动的方式,为左右两栏设置对应方向的浮动。中间一栏设置左右两个方向的margin
负值。注意这种方式,中间一栏必须放到最后。
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
</div>
CSS样式:
div {
height: 100px;
}
.left {
float: left;
width: 200px;
background-color: red;
}
.right {
float: right;
width: 200px;
background-color: blue;
}
.middle {
margin-left: 200px;
margin-right: 200px;
background-color: green;
}
3. 圣杯布局
核心思想:利用浮动,外边距负值和相对定位来实现。
- 父级元素设置左右的
padding
,三列均设置向左浮动; - 中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行;
- 再通过设置
margin
负值将其移动到上一行; - 再利用相对定位,定位到两边。
注意:圣杯布局中间列的宽度不能小于两边任意列的宽度,而双飞翼布局则不存在这个问题。
HTML结构:
<div class="container">
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
CSS样式:
.container {
height: 100px;
padding: 0 200px 0 200px;
overflow: hidden;
}
.middle,
.left,
.right {
float: left;
height: 100%;
}
.middle {
width: 100%;
background: green;
}
.left {
position: relative;
width: 200px;
margin-left: -100%;
left: -200px;
background: red;
}
.right {
position: relative;
width: 200px;
margin-right: -200px;
background: blue;
}
4. 双飞翼布局
核心思想:浮动 + 外边距负值
双飞翼布局相对于圣杯布局来说,左右位置的保留是通过中间列的margin
值来实现的,而不是通过父元素的padding
来实现的。
HTML结构
<div class="container">
<div class="middle">
<div class="inner">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
CSS样式
.container {
height: 100px;
overflow: hidden;
}
.middle,
.left,
.right {
float: left;
height: 100%;
}
.middle {
width: 100%;
background-color: green;
}
.inner {
height: 100%;
margin: 0 200px 0 200px;
}
.left {
width: 200px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
margin-left: -200px;
background-color: blue;
}
5. 定位position
核心思想:利用绝对定位的方式。
好处:这种实现方式的三栏HTML
结构可以任意摆放,不用考虑先后次序。
HTML结构
<div class="container">
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
</div>
CSS样式
.container {
position: relative;
}
.left {
position: absolute;
left: 0;
width: 200px;
background-color: red;
}
.middle {
position: absolute;
left: 200px;
right: 200px;
background-color: green;
}
.right {
position: absolute;
right: 0;
width: 200px;
background-color: blue;
}
6. 弹性布局 flex
核心思想:利用flex
布局的方式,左右两栏设置固定宽度,中间一栏设置为flex: 1;
好处:这种实现方式代码非常简洁。
HTML结构
<div class="container">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
CSS样式
div {
height: 100px;
}
.container {
display: flex;
}
.left {
width: 200px;
background: red;
}
.middle {
flex: 1;
background: green;
}
.right {
background: blue;
width: 200px;
}
7. 网格布局 grid
核心思想:利用grid
布局的方式,左右两栏设置固定宽度,中间一栏设置为auto
。
好处:这种实现方式代码也非常简洁。
HTML结构
<div class="container">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
CSS样式
div {
height: 100px;
}
.container {
display: grid;
/* 核心代码:左右两栏固定宽度,中间自适应宽度 */
grid-template-columns: 200px auto 200px;
}
.left {
background: red;
}
.middle {
background: green;
}
.right {
background: blue;
}
结尾
如有问题,请指正我修改。欢迎评论交流!!!觉得不错请给个赞👍吧😁