圣杯布局和双飞翼布局的理解和区别
作用:圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。
区别:圣杯布局,为了中间div
内容不被遮挡,将中间div
设置了左右padding-left
和padding-right
后,将左右两个div
用相对布局position: relative
并分别配合right
和left
属性,以便左右两栏div
移动后不遮挡中间div
。双飞翼布局,为了中间div
内容不被遮挡,直接在中间div
内部创建子div
用于放置内容,在该子div
里用margin-left
和margin-right
为左右两栏div
留出位置。
圣杯布局代码
https://www.webxiu.com.cn/coding/100048
双飞翼布局代码
正文结束
Ctrl + Enter