【两边宽度固定、中间自适应布局的解决方案】趁有时间，整理一下，做个笔记！
前端面试的时候关于布局方面通常会问这样一个问题：假设已知高度，完成三栏布局，两边栏定宽，中间栏自适应宽度。
当然还有同样类型的题，如上中下三栏，上下固定高，中间栏自适应，这种也是很常见的布局类型。还有两栏的布局，左边固定宽，右边自适应，反过来的情况等等，此处不讨论。
文章目录
- 左中右三栏布局
- 1 浮动方式
- 2 定位方式
- 3 flex弹性布局方式
- 4 table表格布局方式
- 5 grid网格布局方式
- 上中下三栏布局
- 1 中间盒子高100%、上下定位方式
- 2 定位方式
- 3 flex弹性布局方式
- 4 table表格布局方式
- 5 grid网格布局方式
左中右三栏布局 1 浮动方式
css代码
.parent{width: 100%;
height: 200px;
text-align: center;
}
.left {float: left;
width: 300px;
height: inherit;
background: yellow;
}
.right{float: right;
width: 300px;
height: inherit;
background: pink;
}
.center{height: inherit;
background: #ff362a;
}
html代码
左边固定宽度盒子(左浮动)
右边固定宽度盒子(右浮动)
中间宽度自适应盒子(宽度不写且不浮动)
外面套一个大盒子（width: 100%，高度固定），里面是三个小盒子。注意三个盒子的顺序，前两个是放左右两个盒子，一个左浮动一个右浮动，他们都脱标不占位置，所以第三个盒子（中间盒子，在标准流中）就能跑到它们两个下面，没有写宽则宽默认为100%，事实上左右两个盒子此时是有压住部分的中间盒子的（可以通过给第三个盒子加相对定位看到第三个盒子的全貌，此时左右盒子被压在下面，这里不写，感兴趣的可以试一下）。
文章图片
效果展示：
文章图片
2 定位方式
css代码
.parent {
position: relative;
width: 100%;
height: 200px;
text-align: center;
}
.left {
width: 300px;
height: 200px;
position: absolute;
background: yellow;
}
.right {
width: 300px;
height: 200px;
position: absolute;
right: 0;
background: pink;
}
.center {
height: 200px;
position: absolute;
left: 300px;
right: 300px;
background: red;
}
html代码
左边固定宽度盒子(absolute)
右边固定宽度盒子(absolute)
中间宽度自适应盒子(宽度不写且absolute)
外面套一个相对定位的大盒子（width: 100%，高度固定），里面是三个绝对定位的小盒子，其中左(默认
left:0)、右(right: 0;
)两边的绝对定位的盒子设置宽度固定，中间盒子也绝对定位，并设置left: 300px;
right: 300px;
，此时三个盒子都不占位置且并排站，谁都不压谁。效果展示：
文章图片
3 flex弹性布局方式
.parent {
width: 100%;
height: 200px;
display: flex;
text-align: center;
}
.left {
width: 300px;
background: yellow;
}
.center {
flex: 1;
background:red;
}
.right {
width: 300px;
background:pink;
}
左边盒子宽度固定
中间盒子 flex: 1;
实现自适应
右边盒子宽度固定
外面套一个伸缩的大盒子（width: 100%，高度固定），左右盒子宽度固定、中间盒子设置
flex: 1;
，此方法最简单。注意此时的三个盒子顺序是 左 中 右 ，和上面两种的 左 右 中 顺序不同
文章图片
4 table表格布局方式
.parent {
display: table;
width: 100%;
height: 200px;
text-align: center;
}
.parent > *{
/*height: 200px;
*//*高会继承，其实不用写*/
display: table-cell;
}
.left {
width: 300px;
background: yellow;
}
.center {
background: red;
}
.right {
width: 300px;
background: pink;
}
左边盒子宽度固定（table-cell）
中间盒子什么都不写实现自适应（table-cell）
右边盒子宽度固定（table-cell）
外面大盒子设为
display: table;
（其中width: 100%，高度固定），然后下面三个盒子设置为display: table-cell;
，接下来设置左、右盒子的宽度即可，中间盒子不用设置。
文章图片
5 grid网格布局方式
.parent {
width: 100%;
/*height: 200px;
*/
display: grid;
grid-template-rows: 200px;
/*行的高度 也可以直接如上写高度*/
grid-template-columns: 300px auto 300px;
/*列的宽度*/
text-align: center;
}
.left {
background: yellow;
}
.center {
background: red;
}
.right {
background: pink;
}
左边盒子
中间实现自适应
右边盒子
三个盒子共同的父元素宽100%、高固定，然后对其设置
display: grid;
grid-template-columns: 300px auto 300px;
，则下面的三个盒子直接自己就实现了左右定宽、中间自适应的形式
文章图片
上中下三栏布局 上中下三栏，上下高固定、中间的高自适应：
1 中间盒子高100%、上下定位方式
设置中间盒子高100%，并设置其padding-top、padding-bottom分别为上下两个盒子固定的高，接下来写上下两个盒子，使他们绝对定位，定位到最上和最下即可；
2 定位方式
*{
margin: 0;
padding: 0;
}
.parent {
/*width: 100%;
*/
/*height: 100%;
*/
width: 100vw;
height: 100vh;
position: relative;
text-align: center;
}
.top {
width: 100%;
height: 50px;
position: absolute;
top: 0;
background: yellow;
}
.center {
width: 100%;
position: absolute;
top: 50px;
bottom: 50px;
background: red;
}
.bottom {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background: pink;
}
上面盒子
中间盒子高度实现自适应
下面盒子
外面套一个相对定位的大盒子（
width: 100vw;
height: 100vh;
），里面是三个绝对定位的小盒子，其中上(默认top: 0;
)、右(bottom: 0;
)两边的绝对定位的盒子设置宽度固定为50，中间盒子也绝对定位，并设置top: 50px;
bottom: 50px;
文章图片
3 flex弹性布局方式
css代码如下，html及图片和2中的一样
*{margin: 0;
padding: 0;
}
html,body{
/*很重要，这步不设置高度，下面box高度100%不会起作用*/
height: 100%;
}
.parent {
width: 100%;
height: 100%;
/*若想起作用记得设置上面body的高为100%*/
/*width: 100vw;
*/
/*height: 100vh;
*/
display: flex;
flex-direction: column;
text-align: center;
}
.top {
height: 50px;
background: yellow;
}
.center {
flex: 1;
background: red;
}
.bottom {
height: 50px;
background: pink;
}
4 table表格布局方式
css代码如下，html及图片和2中的一样
*{margin: 0;
padding: 0;
}
html,body{
/*很重要，这步不设置高度，下面box高度100%不会起作用*/
height: 100%;
}
.parent {
width: 100%;
height: 100%;
/*若想起作用记得设置上面body的高为100%*/
display: table;
text-align: center;
}
.parent > *{
display: table-row;
/*不是table-cell*/
}
.top {
height: 50px;
background: yellow;
}
.center {
background: red;
}
.bottom {
height: 50px;
background: pink;
}
5 grid网格布局方式
css代码如下，html及图片和2中的一样
*{margin: 0;
padding: 0;
}
html,body{
/*很重要，这步不设置高度，下面box高度100%不会起作用*/
height: 100%;
}
.parent {
width: 100%;
height: 100%;
/*若想起作用记得设置上面body的高为100%*/
display: grid;
grid-template-rows: 100px auto 100px;
text-align: center;
}
.top {
background: yellow;
}
.center {
background: red;
}
.bottom {
background: pink;
}
时间是一个好东西，记录的是爱你的证据
