这篇文章主要介绍css如何实现圣杯布局或双飞翼布局,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
经典的圣杯布局和双飞翼布局都是由左中右三列
组成,其特点为左右两列宽度固定
、中间一列宽度自适应
和三列高度固定且相等
。其实也是上述两列布局和三列布局的变体,整体的实现原理与上述N列布局一致,可能就是一些细节需注意。
圣杯布局
和双飞翼布局
在大体相同下也存在一点不同,区别在于双飞翼布局
中间列需插入一个子节点。在常规实现方式里也是在这个中间列里做文章,如何使中间列内容不被左右列遮挡
。
相同
中间列放首位且声明其宽高占满父节点
被挤出的左右列使用float
和margin负值
将其拉回与中间列处在同一水平线上
不同
圣杯布局:父节点声明padding
为左右列留出空位,将左右列固定在空位上
双飞翼布局:中间列插入子节点并声明margin
为左右列让出空位,将左右列固定在空位上
圣杯布局float + margin-left/right + padding-left/right
由于浮动节点在位置上不能高于前面或平级的非浮动节点,否则会导致浮动节点下沉。因此在编写HTML结构时,将中间列节点挪到右列节点后面。
<div class="grail-layout-x"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>
.grail-layout-x { padding: 0 100px; width: 400px; height: 400px; .left { float: left; margin-left: -100px; width: 100px; height: 100%; background-color: #f66; } .right { float: right; margin-right: -100px; width: 100px; height: 100%; background-color: #66f; } .center { height: 100%; background-color: #3c9; } }
双飞翼布局float + margin-left/right
HTML结构大体同上,只是在中间列里插入一个子节点<div>
。根据两者区别,CSS声明会与上述圣杯布局有一点点出入,可观察对比找出不同地方。
<div class="grail-layout-y"> <div class="left"></div> <div class="right"></div> <div class="center"> <div></div> </div> </div>
.grail-layout-y { width: 400px; height: 400px; .left { float: left; width: 100px; height: 100%; background-color: #f66; } .right { float: right; width: 100px; height: 100%; background-color: #66f; } .center { margin: 0 100px; height: 100%; background-color: #3c9; } }
圣杯布局/双飞翼布局flex
使用flex实现圣杯布局/双飞翼布局
可忽略上述分析,左右两列宽度固定,中间列宽度自适应。
<div class="grail-layout"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
.grail-layout { display: flex; width: 400px; height: 400px; .left { width: 100px; background-color: #f66; } .center { flex: 1; background-color: #3c9; } .right { width: 100px; background-color: #66f; } }
以上是“css如何实现圣杯布局或双飞翼布局”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。