方法一: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解决方案
【css|固定两边,中间自适应布局方案】本文摘录自其它博客,详情请点击
推荐阅读
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|JavaScript之DOM增删改查(重点)
- 网络|一文彻底搞懂前端监控
- css|我用css精灵图拼接了自己的英文名字,不会还有人不知道精灵图技术吧()
- css|css三角的做法及其案例
- css|css中元素的显示与隐藏
- JavaWeb|JavaWeb学习——CSS
- flex|C语言-使用goto语句从循环中跳出
- java|你跳一次涨多少(今天见识到跳槽天花板!!)