css如何实现圣杯布局或双飞翼布局
导读:本文共2113字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 圣杯布局/双飞翼布局经典的圣杯布局和双飞翼布局都是由左中右三列组成,其特点为左右两列宽度固定、中间一列宽度自适应和三列高度固定且相等。其实也是上述两列布局和三列布局的变体,整体的实现原理与上述N列布局一致,可能就是一些细节需注意。圣杯布局和双飞翼布局在大体相同下也存在一点不同,区别在于双飞翼布局中间列需插入一个子节点。在常规实现方式里也是在这个中间列里做文章,如... ...
目录
(为您整理了一些要点),点击可以直达。经典的圣杯布局和双飞翼布局都是由左中右三列
组成,其特点为左右两列宽度固定
、中间一列宽度自适应
和三列高度固定且相等
。其实也是上述两列布局和三列布局的变体,整体的实现原理与上述N列布局一致,可能就是一些细节需注意。
圣杯布局
和双飞翼布局
在大体相同下也存在一点不同,区别在于双飞翼布局
中间列需插入一个子节点。在常规实现方式里也是在这个中间列里做文章,如何使中间列内容不被左右列遮挡
。
相同
中间列放首位且声明其宽高占满父节点
被挤出的左右列使用
float
和margin负值
将其拉回与中间列处在同一水平线上不同
圣杯布局:父节点声明
padding
为左右列留出空位,将左右列固定在空位上双飞翼布局:中间列插入子节点并声明
margin
为左右列让出空位,将左右列固定在空位上
圣杯布局float + margin-left/right + padding-left/right
由于浮动节点在位置上不能高于前面或平级的非浮动节点,否则会导致浮动节点下沉。因此在编写HTML结构时,将中间列节点挪到右列节点后面。
<divclass="grail-layout-x"><divclass="left"></div><divclass="right"></div><divclass="center"></div></div>
.grail-layout-x{padding:0100px;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声明会与上述圣杯布局有一点点出入,可观察对比找出不同地方。
<divclass="grail-layout-y"><divclass="left"></div><divclass="right"></div><divclass="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:0100px;height:100%;background-color:#3c9;}}
圣杯布局/双飞翼布局flex
使用flex实现圣杯布局/双飞翼布局
可忽略上述分析,左右两列宽度固定,中间列宽度自适应。
<divclass="grail-layout"><divclass="left"></div><divclass="center"></div><divclass="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;}}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
css如何实现圣杯布局或双飞翼布局的详细内容,希望对您有所帮助,信息来源于网络。