实现左右两边固定宽度，中间自适应的布局
废话不多说，上代码~
方法一：float解决方案
.layout.float {
width: 100%;
height: 100px;
}.layout.float .floatleft-center-right>div {
height: 100px;
}.floatleft-center-right .left {
background: red;
width: 300px;
float: left;
}.floatleft-center-right .center {
background: yellow;
}.floatleft-center-right .right {
background: blue;
width: 300px;
float: right;
}float解决方案
【实现左右两边固定宽度，中间自适应的布局】float解决方案
float解决方案
方法二：绝对定位position解决方案
.layout.position {
width: 100%;
height: 100px;
position: relative
}.layout.position .positionleft-center-right>div {
height: 100px;
position: absolute;
}.positionleft-center-right .left {
background: red;
width: 300px;
left: 0;
}.positionleft-center-right .center {
background: yellow;
left: 300px;
right: 300px;
}.positionleft-center-right .right {
background: blue;
width: 300px;
right: 0;
}position解决方案
position解决方案
position解决方案
方法三：flex解决方案
.layout.flexbox {
width: 100%;
height: 100px;
}.flexLeft-center-right {
display: flex;
}.flexLeft-center-right>div {
height: 100px;
}.flexLeft-center-right .left {
background: red;
width: 300px;
}.flexLeft-center-right .center {
background: yellow;
flex: 1;
}.flexLeft-center-right .right {
background: blue;
width: 300px;
}flexBox解决方案
flexBox解决方案
flexBox解决方案
方法四：table解决方案
.layout.table .tableLeft-center-right {
width: 100%;
height: 100px;
display: table;
}.tableLeft-center-right>div {
display: table-cell;
}.tableLeft-center-right .left {
background: red;
width: 300px;
}.tableLeft-center-right .center {
background: yellow;
}.tableLeft-center-right .right {
width: 300px;
background: blue;
}table解决方案
table解决方案
table解决方案
方法五：grid解决方案
.layout.grid .gridLeft-center-right {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.gridLeft-center-right .left{
background: red;
}
.gridLeft-center-right .center{
background: yellow;
}
.gridLeft-center-right .right{
background: blue;
}grid解决方案
grid解决方案
grid解决方案
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM