一. display: flex
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left {
width: 300px;
background: red;
}
.layout.flexbox .center {
/* 获得剩余可分配的空间 */
flex: 1;
background: yellow;
}
.layout.flexbox .right {
width: 300px;
background: blue;
}
二. relative, absolute
.left-center-right {
position: relative;
}
.layout.absolute .left {
position: absolute;
left: 0;
width: 300px;
background: red;
}
.layout.absolute .right {
position: absolute;
right: 0;
width: 300px;
background: blue;
}
.layout.absolute .center {
position: absolute;
left: 300px;
right: 300px;
background: yellow;
}
三. display: table, table-cell
.layout.table .left-center-right {
display: table;
}
.layout.table .left {
display: table-cell;
width: 300px;
background: red;
}
.layout.table .center {
display: table-cell;
background: yellow;
}
.layout.table .right {
display: table-cell;
width: 300px;
background: blue;
}
四. display: grid
.layout.grid .left-center-right {
width: 100%;
display: grid;
/* 一行： 高度为150px */
grid-template-rows: 150px;
/* 3列： 300px auto 300px */
grid-template-columns: 300px auto 300px;
}
.layout.float .left {
background: red;
}
.layout.float .center {
background: yellow;
}
.layout.float .right {
background: blue;
}
五. float
.layout.float .left-right-center::after {
display: block;
clear: both;
content: '';
}
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .center {
background: yellow;
margin-left: 300px;
margin-right: 300px;
}
.layout.float .right {
float: right;
width: 300px;
background: blue;
}
1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
