CSS 五种实现三栏布局的方法
2020-05-25 18:44:38
# 样式
浏览 101
float 实现三栏布局
.left {
float: left;
width: 300px;
}
.right {
float: right;
width: 300px;
}
.center {
margin-left: 300px;
margin-right: 300px;
/* 或者利用 BFC 原理 */
/* overflow: hidden; */
}
absolute 实现三栏布局
.left {
position: absolute;
left: 0;
width: 300px;
}
.right {
position: absolute;
right: 0;
width: 300px;
}
.center {
position: absolute;
left: 300px;
right: 300px;
}
table 实现三栏布局
.parent {
display: table;
width: 100%;
}
.left, .center, .right {
display: table-cell;
}
flex 实现三栏布局
.parent {
display: flex;
}
.left, .right {
width: 300px;
}
.center {
flex: 1;
}
grid 实现三栏布局
.parent {
width: 100%;
display: grid;
grid-template-rows: 300px;
grid-template-columns: 300px auto 300px;
}