如何实现侧边两栏宽度固定,中间栏宽度自适应的布局?——双飞翼布局、圣杯(Holy Grails)布局

本文介绍了圣杯布局、双飞翼布局以及使用浮动和flex实现的三栏布局方法,重点讲述了两种布局方式的原理和代码示例,展示了CSS在响应式设计中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

勇气也许不能所向披靡,但胆怯根本无济于事。

希望你永远有勇气从头再来。

14690f44d59e4abfad28a425c8a9d6bf.jpeg

引用——圣杯(Holy Grails)布局&双飞翼布局

        圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 

        《In Search of the Holy Grail》,

        国内最早是淘宝UED的工程师(玉伯)对圣杯布局改进并传播开来,国内叫法是双飞翼布局 。

        双飞翼布局是针对圣杯局部优化的解决方案。主要是优化了圣杯布局中开启定位的问题。

da08f9d1df4b92b2d21c4a96cd475d35.png

 

        圣杯布局和双飞翼布局达到的效果基本相同,

        均是三栏布局,侧边两栏宽度固定,中间栏宽度自适应。

        主要的不同之处就是在防止中间部分被覆盖时,采取的解决办法不一样

        圣杯布局是在父元素上设置了padding-left和padding-right,在给左右两边的内容设置position为relative,通过左移和右移来使得左右两边的内容得以很好的展现,

        而双飞翼则是在center这个div中再加了一个div来放置内容,在给这个新的div设置margin-left和margin-right 。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值