一、实现1个圣杯布局
- HTML
<div class="bottom" >header</div>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
- CSS
.bottom {
background: #eee;
text-align: center;
line-height: 100px;
}
.main {
display: flex;
}
.left,
.center,
.right {
text-align: center;
line-height: 500px;
}
.left,
.right {
width: 200px;
background: #ddd;
}
.center {
flex: 1;
background: white;
}
Tips:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
---------- 创作不易,感谢大家,请多多支持!