欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

【经典布局】圣杯布局和双飞翼布局

发布时间：2024/1/18 编程问答 43 豆豆
生活随笔 收集整理的这篇文章主要介绍了 【经典布局】圣杯布局和双飞翼布局 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、两种布局的对比
  • 二、使用步骤
    • 1. 圣杯布局
    • 2. 双飞翼布局
  • 总结

前言

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

一、两种布局的对比

圣杯布局和双飞翼的特点：
1、两边定宽，中间100%
2、中间部分优先渲染，提升用户体验
圣杯布局缺点：当中间区域宽度小于两边时，布局会破碎
双飞翼布局不会破碎

二、使用步骤

1. 圣杯布局

圣杯布局：
步骤：

  • 设置padding给左右两边预留空间
  • 负外边距+相对定位移到空白区域
  • 双飞翼不会破碎
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.wrapper>div{float: left;}.wrapper>.center{width: 100%;height: 200px;background-color: green;}.fl,.fr{width: 200px;height: 200px;}/* 2、负外边距+相对定位移到空白区域 */.fl{background-color: red;/* 负外边距 */margin-left: -100%;/* 相对定位 */position: relative;left: -200px;}.fr{background-color: blue;margin-left: -200px;position: relative;left: 200px;}/* 1、设置padding给左右两边预留空间 */.wrapper{padding-left: 200px;padding-right: 200px;min-width: 600px;}</style></head><body><div class="wrapper"><div class="center">中间</div><div class="fl">左边</div><div class="fr">右边</div></div></body> </html>

展现效果：

2. 双飞翼布局

双飞翼:
步骤
wrapper(div中(div.contain) div左 div右)

  • wrapper >div,float:left
  • div.contain设置左右margin
  • div左, margin-left:-100%
  • div右, margin-left: px
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>.wrapper>div{float: left;}.center .contain{height: 200px;margin-left: 200px;margin-right: 200px;}.center{width: 100%;height: 200px;background-color: green;}.fl,.fr{width: 200px;height: 200px;}.fl{background-color: red;margin-left: -100%;}.fr{background-color: blue;margin-left: -200px;}</style></head><body><div class="wrapper"><div class="center"><div class="contain"></div></div><div class="fl"></div><div class="fr"></div></div></body> </html>

展现效果：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了圣杯布局和双飞翼布局的使用，圣杯布局和双飞翼的特点就是两边定宽，中间100%，中间部分优先渲染，提升用户体验。

总结

以上是生活随笔为你收集整理的【经典布局】圣杯布局和双飞翼布局的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。