当前位置: 首页 > Web前端 > HTML

三栏布局解决方案总结

时间:2023-04-02 16:01:10 HTML

.left{float:left;高度:200px;宽度:100px;背景色:红色;}.right{宽度:200px;高度:200px;背景颜色:蓝色;浮动:对;}.main{左边距:120px;右边距:220px;高度:200px;背景色:绿色;}三栏布局解决方案三栏布局在开发中非常常见,经常被作为面试题作为布局考点。大致是一种边固定,中间自适应的布局方案,下面总结几种方案供学习参考。浮动流布局.left{float:left;高度:200px;宽度:100px;背景色:红色;}.right{宽度:200px;高度:200px;背景颜色:蓝色;浮动:对;}.main{左边距:120px;右边距:220px;高度:200px;背景色:绿色;}

/div>BFC三栏布局解决方案//在上面的流式布局主解决方案中替换height:200px;溢出:隐藏;背景色:绿色;绝对定位圣杯,双飞翼解决方案tablelayoutflexlayoutgridgrid布局解决方案(目前兼容性不是很好)学习总结:常见的三列布局实现