CSS布局是前端笔面试经常会被问到的问道。
今天总结一下五种方法 实现三栏布局 两边固定宽度 中间自适应的实现 。
image
*{
margin: 0;
padding: 0;
}
.layout{
margin-top: 20px;
height: 200px;
}
.layout .left,.layout .right{
width: 300px;
height: 200px;
background-color: #f7e4e4;
}
.layout .center{
height: 200px;
background-color: #e7aaaa;
}
/* 1. 通过浮动 */
.layout.float .left{
float: left;
}
.layout.float .right{
float: right;
}
/* 2. 通过绝对定位 */
.layout.absolute>div{
position: absolute;
}
.layout.absolute .left{
left: 0;
}
.layout.absolute .right{
right: 0;
}
.layout.absolute .center{
right: 300px;
left: 300px;
}
/* 3. 通过flex */
.layout.flex {
display: flex;
}
.layout.flex .center{
flex: 1;
}
/* 4. 通过table-cell */
.layout.table {
display: table;
width: 100%;
}
.layout.table>div{
display: table-cell;
}
/* 5. 通过grid布局 */
.layout.grid {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}