高度已知，左右定宽，中间自适应三栏布局的五种写法
1.使用浮动布局
Document - 锐客网 *{
margin: 0;
padding: 0;
}.box>div{
height: 100px;
}.box .left{
background-color: red;
width: 300px;
float: left;
}.box .right{
background-color: blue;
width: 300px;
float: right;
}.box .center{
text-align: center;
line-height: 100px;
color: #fff;
background-color: orange;
}第一种方法：浮动
【高度已知，左右定宽，中间自适应三栏布局的五种写法】2.使用定位布局
Document - 锐客网 *{
margin: 0;
padding: 0;
}.box>div{
height: 100px;
position: absolute;
}.box .left{
background-color: red;
width: 300px;
left: 0;
}.box .right{
background-color: blue;
width: 300px;
right: 0;
}.box .center{
text-align: center;
line-height: 100px;
color: #fff;
background-color: orange;
left: 300px;
right: 300px;
}第二种方法：定位
3.使用flex布局
Document - 锐客网 *{
margin: 0;
padding: 0;
}.box{
display: flex;
}.box>div{
height: 100px;
}.box .left{
background-color: red;
width: 300px;
}.box .right{
background-color: blue;
width: 300px;
}.box .center{
text-align: center;
line-height: 100px;
color: #fff;
background-color: orange;
flex: 1;
}第三种方法：flexbox布局
4.使用表格布局
Document - 锐客网 *{
margin: 0;
padding: 0;
}.box{
display: table;
width: 100%;
height: 100px;
}.box>div{
display: table-cell;
}.box .left{
background-color: red;
width: 300px;
}.box .right{
background-color: blue;
width: 300px;
}.box .center{
text-align: center;
line-height: 100px;
color: #fff;
background-color: orange;
}第四种方法：表格布局
5.使用网格布局
Document - 锐客网 *{
margin: 0;
padding: 0;
}.box{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}.box .left{
background-color: red;
}.box .right{
background-color: blue;
}.box .center{
text-align: center;
line-height: 100px;
color: #fff;
background-color: orange;
}第五种方法：网格布局
转载于:https://www.cnblogs.com/fangfeiyue/p/7392673.html
推荐阅读
- JS中的各种宽高度定义及其应用
- 高度自律等于成功的第一步
- 两三老友|两三老友 足矣
- iOS自适应高度的TableViewCell
- 虐虐快速通关秘籍放这，高度概括就是听话照做！
- 别让旁人左右了自己的心情
- 大气压换算海拔
- tableviewcell在xib情况下的高度自适应
- 践行第60天【高度专注力模式】
- 袁爷爷，一路走好