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

四种实现方式——三栏布局(圣杯布局、双飞翼布局)

时间:2023-04-02 23:10:33 HTML

.main{溢出:隐藏;背景:#eee;}.left{背景:红色;宽度:200px;高度:280px;向左飘浮;}.right{背景:蓝色;宽度:200px;高度:290px;浮动:对;-右:200px;}圣杯布局、双飞翼布局,本质上都是三栏布局——两者中间自适应固定宽度双方。有一次面试,让我写三个实现方法,结果只写了两个。面试官说基础不够扎实~wooHolyGrailLayoutHolyGrailHTML结构:Middle

Left
Right
双飞翼布局双飞翼HTML结构为:右1.float+margin.main{溢出:隐藏;背景:#eee;}.left{背景:红色;宽度:200px;高度:280px;向左飘浮;}.right{背景:蓝色;宽度:200px;高度:290px;浮动:对;-右:200px;}解释:网上还有人用padding取代保证金。有兴趣的可以自己查一下。位置.main{位置:相对;}.left{背景:红色;高度:300px;宽度:200px;位置:绝对;左:0;顶部:0;}.right{背景:蓝色;高度:300px;宽度:200px;位置:绝对;右:0;顶部:0;说明:网上有人提到这种方法在某些情况下会存在bug,但我没有深入理解。3.Flex.main{display:flex;对齐项目:居中;}.left{背景:红色;宽度:200px;高度:300px;}.right{背景:蓝色;宽度:200px;高度:300px;}.middle{背景:绿色;高度:300px;宽度:100%;}说明:低版本浏览器存在兼容性问题,网上有人用顺序控制位置4.Grid.main{display:grid;高度:300px;}.left{背景:红色;网格行:1;网格列:1/2;}.right{背景:蓝色;网格行:1;网格列:4/5;}.middle{背景:绿色;网格行:1;网格列:2/4;<divclass="main">说明:网格列分为5个网格。“grid-column:1/2”占据第一格和第二格。这并不意味着它占据了一半的网格。这种方式存在比较大的兼容性问题。网上很多文章提到浏览器还没有支持,但实际上新的主流浏览器已经支持了。