五种方式实现左右两栏固定宽度中间自适应
页面布局 html * {
margin:0px;
padding:0px;
}.layout-float {
margin-bottom:10px;
}
.layout-float > div{
height:100px;
}
.left {
float:left;
width:300px;
background: red;
}
.right {
float:right;
width:300px;
background: blue;
}
.middle {
background: yellow;
}float的三栏布局.layout-position > div{
height:100px;
position:absolute;
}
.left {
left:0;
width:300px;
background: red;
}
.middle {
left:300px;
right:300px;
background: yellow;
}
.right {
right:0px;
width:300px;
background: blue;
}position的三栏布局.layout-flex {
height:100px;
display:flex;
margin-top:120px;
}
.left {
width:300px;
background: red;
}
.middle {
flex:1;
background: yellow;
}
.right {
width:300px;
background: blue;
}flex的三栏布局.layout-grid {
display:grid;
width:100%;
grid-template-rows:100px;
grid-template-columns: 300px auto 300px;
margin-top:10px;
}
.left {
background: red;
}
.middle {
background: yellow;
}
.right {
background: blue;
}grid的三栏布局【五种方式实现左右两栏固定宽度中间自适应】转载于:https://www.cnblogs.com/wzp-monkey/p/10481113.html
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM