css经典布局——双飞翼布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

效果图

原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览。注意：为了安全起见，最好还是给body加一个最小宽度!

双飞翼布局要求

header和footer各自占领屏幕所有宽度，高度固定。
中间的container是一个三栏布局。
三栏布局两侧宽度固定不变，中间部分自动填充整个区域。
中间部分的高度是三栏中最高的区域的高度。

双飞翼布局的实现

left、center、right三种都设置左浮动
设置center宽度为100%
设置负边距，left设置负边距为100%，right设置负边距为自身宽度
设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>body {min-width: 550px;font-weight: bold;font-size: 20px;}#header,#footer {background: rgba(29, 27, 27, 0.726);text-align: center;height: 60px;line-height: 60px;}#container {overflow: hidden;}.column {text-align: center;height: 300px;line-height: 300px;}#left, #right, #center {float: left;}#center {width: 100%;background: rgb(206, 201, 201);}#left {width: 200px;margin-left: -100%;background: rgba(95, 179, 235, 0.972);}#right {width: 150px;margin-left: -150px;background: rgb(231, 105, 2);}.content {margin: 0 150px 0 200px;}
</style><body><div id="header">#header</div><div id="container"><div id="center" class="column"><div class="content">#center</div></div><div id="left" class="column">#left</div><div id="right" class="column">#right</div></div><div id="footer">#footer</div>
</body></html>

css经典布局——双飞翼布局相关推荐

CSS中经典的双飞翼布局(
笔者在一些博客和论坛中经常看到经典的双飞翼布局,淘宝的首页也运用了这种兼容性很好的双飞翼布局 1.何谓双飞翼布局? 简单来说,双飞翼布局是将一个网页分为左列,中列和右列三部分,并且我们要得到的效果是: ...
[css] 圣杯布局双飞翼布局
文章目录三栏式布局圣杯布局方法1:使用float布局框架 , 用margin为负值 , position: relative定位分析: 代码: 缺点方法2:calc 方法3: flex布局 ...
圣杯布局双飞翼布局认识
作为纯野生的前端小白,当第一次听到圣杯布局的时候是懵逼的,这是什么布局,简直从来没听过.于是乎搜索引擎搜索一番,狂点开十来个页面,看demo,看评论,动手实践demo,最后..."圣杯布局从 ...
主流布局--双飞翼布局
主流布局–双飞翼布局什么是双飞翼布局? 双飞翼布局最早是淘宝团队提出的,是针对圣杯局部优化的解决方案.主要是优化了圣杯布局中开启定位的问题. HTML <div class="par ...
【聊一聊】css中的经典布局——双飞翼布局
上一文,[聊一聊]css中的经典布局--圣杯布局中,我介绍过,圣杯布局不添加额外的标签(主要是只中间块).在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的, ...
CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局(左列定宽, 右列自适应) DOM结构 <div class="box"><div class="box-left"></ ...
html双翼布局,第19题 CSS如何实现双飞翼布局？
双飞翼布局如下图所示: 有了圣杯布局的铺垫,双飞翼布局也就问题不大啦.这里采用经典的float布局来完成. HTML代码: 双飞翼布局码云笔记 mybj123.com CSS代码: *{ margi ...
CSS圣杯布局常用吗,CSS 经典三列布局之圣杯布局
圣杯布局圣杯布局是典型的 CSS 布局问题,有着众多的解决方案. 圣杯布局是一种非常经典和常用的布局方式,其所指的是三列布局,中间宽度自适应,两边定宽:或者两列布局,主体宽度自适应,左边或右边定宽. ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...

css经典布局——双飞翼布局

效果图

双飞翼布局要求

双飞翼布局的实现

css经典布局——双飞翼布局相关推荐

最新文章

热门文章