腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

综合排序丨最热优先丨最新优先

双飞翼布局----利用float和margin实现双飞翼布局

双飞翼布局实现两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。这里对布局进行改进，会将中间栏放到两边定宽后渲染！ 双飞翼布局的原理圣杯布局的原理 DEMO

2021-01-29

8220

标签:

CSS布局 -- 圣杯布局 & 双飞翼布局

按照我的理解，其实圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。但在这里实现起来还是有一些区别的【圣杯布局】 ? </div> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html> 【双飞翼布局 DEMO 听说双飞翼布局是玉伯大大提出来的，始于淘宝UED 如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>双飞翼布局

2018-09-03

2.1K0

标签:

双飞翼布局的原理

双飞翼布局的起源 双飞翼布局介绍-始于淘宝UED 双飞翼布局解决的问题两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。其实双飞翼布局就是在圣杯布局的原理上进行完善，实现相同效果的完美布局！ 双飞翼布局原理 HTML代码 <div id="content"> <div id="main-wrap"><div id="main"></div></div> <div id="left left: 100px; } #right{ width:100px ; margin-right: -100px; background: green; } 对比圣杯布局和双飞翼布局，我们会发现原理其实是一样的，都是采用了浮动 float、负边距 negative margin、相对定位 relative position来对div的位置改变，双飞翼布局是在main的外层添加了一个容易

2021-01-29

1.1K0

标签:

射雕的双飞翼布局

符合"渐进增强"标准+栅格理论，同时兼容性也不错，几乎没有到用hack <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> *{padding:0;margin:0} d

菩提树下的杨过

2018-01-24

6420

标签:

CSS-双飞翼布局

双飞翼布局的实现步骤搞一个容器, 里面放三个盒子设置两侧盒子的宽度(固定)设置中间盒子的宽度等于容器的宽度(100%)让三个盒子都在同一个方向上浮动给中间的盒子添加一个子盒子给子盒子设置 margin DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style>

2023-09-29

3330

标签:

2023腾讯·技术创作特训营第二期

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

Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在 双飞翼布局要求 header和footer各自占领屏幕所有宽度，高度固定。中间的container是一个三栏布局。三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 双飞翼布局的实现 left、center、right三种都设置左浮动设置center宽度为100% 设置负边距，left设置负边距为100%，right设置负边距为自身宽度设置content的margin

全栈程序员站长

2022-07-22

1.5K0

标签:

圣杯布局与双飞翼布局

圣杯布局是用padding属性来腾位置，而双飞翼布局则是用margin属性，同时要修改下html的布局结构。前面介绍过，双飞翼布局和圣杯布局的区别，就在于如何处理中间栏被遮挡的问题。 双飞翼布局要稍微修改下html。具体实现：在中间栏中在放一个div来显示内容，并设置其margin。 .png 三．小结本文主要介绍了如何一步步地实现圣杯布局和双飞翼布局。圣杯布局相较于双飞翼布局，样式设置稍有些复杂。双飞翼布局样式设置比较简单，但需要修改html布局结构。建议在阅读本文前，可以先阅读下三种方法实现CSS三栏布局，便于加深理解。如有问题，欢迎指正。

2018-10-07

3.7K3

标签:

圣杯布局与双飞翼布局

</div> </div> <footer id="footer">底部</footer> </div> </body> </html> 双飞翼布局 DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <style

2018-04-24

1K0

标签:

day011:CSS如何实现双飞翼布局？

day011:CSS如何实现双飞翼布局？ ? 有了圣杯布局的铺垫，双飞翼布局也就问题不大啦。这里采用经典的float布局来完成。 <! > </head> <body> <article class="container"> <div class="center"> <div class="inner">双飞翼布局

2021-03-11

4150

标签:

css布局记录之双飞翼布局、圣杯布局

双飞翼布局和圣杯布局是比较常用的布局方式，都是为了实现一行三列，并且两侧列固定宽度，中间列宽度自适应的效果：直接上代码记录下： <! main_content{ width: 100%; float: left; } /* 双飞翼布局

2019-05-24

7880

标签: