美文网首页
双飞翼布局和圣杯布局

双飞翼布局和圣杯布局

作者: 你好爱人i | 来源:发表于2018-08-02 21:09 被阅读0次

    圣杯布局和双飞翼布局大体上是一样的,都是两边固定宽度,中间自适应的三栏布局。其中,中间栏放到文档流前面,保证先行渲染。解决方案大体相同,都是三栏全部float:left 浮动,区别在于解决中间栏div的内容不被遮挡上。圣杯布局是中间栏添加相对定位,并配合left和right属性,效果上表现是三栏独立分开的。而双飞翼布局是在中间栏的div中嵌套一个div,内容写在嵌套的div里,然后对嵌套的div设置margin-left和margin-right,效果上表现为左右两栏在中间栏的上面,中间栏还是100%的宽度,只不过中间栏的内容通过margin的值显示在中间。

    相关文章

      网友评论

          本文标题:双飞翼布局和圣杯布局

          本文链接:https://www.haomeiwen.com/subject/zrosvftx.html