三栏式布局(所谓的圣杯和双飞翼) - 小火柴的蓝色理想

WBOY
发布: 2016-05-20 13:49:08
原创
1380 人浏览过

前面的话

  常常听说圣杯布局和双飞翼布局,以为是两个很高级的语汇。但实际上,他们只是三栏式布局的两种布局方法而已。本文将介绍三栏式布局的3种思路

思路一: float

【1】圣杯布局

  圣杯布局使用float、负margin和relative,不需要添加额外标签。.main元素设置padding,为两侧定宽元素留出位置。内容元素设置100%宽度,占据中间位置。而两侧定宽元素通过设置负margin和relative的偏移属性配合,到达相应位置

  缺点:并没有实现等高布局;使用了相对定位,扩展性不好

style> body,p{margin: 0;} .top,.bottom{ height: 30px; } .middle{ padding: 0 120px; overflow: hidden; } .main{ width: 100%; float: left; } .left,.right{ float: left; width: 100px; position: relative; } .left{ margin-left: -100%; left: -120px; } .right{ margin-left: -100px; right: -120px; } style>
登录后复制
div class="parent" id="parent" style="background-color: lightgrey;"> div class="top" style="background-color: lightblue;"> p>topp> div> div class="middle" style="background-color: pink;"> div class="main" style="background-color: lightcoral;"> p>mainp> p>mainp> div> div class="left" style="background-color: orange;"> p>leftp> div> div class="right" style="background-color: lightsalmon;"> p>rightp> div> div> div class="bottom" style="background-color: lightgreen;"> p>bottomp> div> div>
登录后复制

【2】双飞翼布局

  双飞翼布局在圣杯布局的基础上,通过为.main元素外添加一层div结构,不使用相对定位。在.main元素上设置margin。两侧的定宽列通过margin来占据.main元素的margin区域

  缺点:并没有实现等高布局,增加了html结构

style> body,p{margin: 0;} .top,.bottom{height: 30px;} .middle{overflow: hidden;} .mainWrap{ width: 100%; float: left; } .main{margin: 0 120px;} .left,.right{ float: left; width: 100px; } .left{margin-left: -100%;} .right{margin-left: -100px;} style>
登录后复制
div class="parent" id="parent" style="background-color: lightgrey;"> div class="top" style="background-color: lightblue;"> p>topp> div> div class="middle" style="background-color: pink;"> div class="mainWrap"> div class="main" style="background-color: lightcoral;"> p>mainp> p>mainp> div> div> div class="left" style="background-color: orange;"> p>leftp> div> div class="right" style="background-color: lightsalmon;"> p>rightp> div> div> div class="bottom" style="background-color: lightgreen;"> p>bottomp> div> div>
登录后复制

【3】float + box-sizing + background-clip

  .main元素的border区域为两侧定宽列的所在区域,实现伪等高效果;设置.main的padding和background-clip来实现元素间隔。两侧元素通过负margin调整到.main元素的border区域

  缺点:兼容性不好

style> body,p{margin: 0;} .top,.bottom{height: 30px;} .middle{overflow: hidden;} .main{ float: left; width: 100%; border-left: 100px solid lightgrey; border-right: 100px solid lightgrey; padding: 0 20px; background-clip: content-box; box-sizing: border-box; } .left,.right{ float: left; width: 100px; } .left{margin-left: -100%;} .right{margin-left: -100px;} style>
登录后复制
div class="parent" id="parent" style="background-color: lightgrey;"> div class="top" style="background-color: lightblue;"> p>topp> div> div class="middle" style="background-color: pink;"> div class="main" style="background-color: lightcoral;"> p>mainp> p>mainp> div> div class="left" > p>leftp> div> div class="right" > p>rightp> div> div> div class="bottom" style="background-color: lightgreen;"> p>bottomp> div> div>
登录后复制

思路二: absolute

  设置子元素的top:0;bottom:0;使得所有子元素的高度都和父元素的高度相同,实现等高效果

  缺点: 需要为.middle元素设置高度,扩展性较差

style> body,p{margin: 0;} .top,.bottom{height: 30px;} .middle{ position: relative; height: 40px; } .left,.right,.main{ position: absolute; top: 0; bottom: 0; } .left{width: 100px;} .right{ width: 100px; right: 0; } .main{ left: 120px; right: 120px; } style>
登录后复制
div class="parent" id="parent" style="background-color: lightgrey;"> div class="top" style="background-color: lightblue;"> p>topp> div> div class="middle" style="background-color: pink;"> div class="main" style="background-color: lightcoral;"> p>mainp> p>mainp> div> div class="left" style="background-color: lightseagreen;" > p>leftp> div> div class="right" style="background-color: lightcyan;" > p>rightp> div> div> div class="bottom" style="background-color: lightgreen;"> p>bottomp> div> div>
登录后复制
登录后复制

思路三: flex

  flex中的伸缩项目默认都拉伸为父元素的高度,可实现等高效果。通过改变伸缩项目的order,可以实现元素顺序调换的效果

  缺点: 兼容性不高

style> body,p{margin: 0;} .top,.bottom{height: 30px;} .middle{display: flex;} .left,.right{width: 100px;} .right{order: 2;} .main{ order: 1; flex: 1; margin: 0 20px; } style>
登录后复制
div class="parent" id="parent" style="background-color: lightgrey;"> div class="top" style="background-color: lightblue;"> p>topp> div> div class="middle" style="background-color: pink;"> div class="main" style="background-color: lightcoral;"> p>mainp> p>mainp> div> div class="left" style="background-color: lightseagreen;" > p>leftp> div> div class="right" style="background-color: lightcyan;" > p>rightp> div> div> div class="bottom" style="background-color: lightgreen;"> p>bottomp> div> div>
登录后复制
登录后复制

总结

  由于限定了主要内容元素在html结构中于前面,通过css样式改变将其位置调到中间的前提,所以思路并不是很多。float浮动流的元素可以通过负margin调换位置;absolute绝对定位流的元素可以通过偏移属性调换位置;flex弹性盒模型可以通过order属性调换位置。而处于正常流中的元素除了使用relative外,使用负margin是无法调换位置的,所以table、inline-block等布局方式在此前提下不是很实用。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!