三栏式布局(所谓的圣杯和双飞翼)_html/css

三栏式布局(所谓的圣杯和双飞翼)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:18:57

Original

1321 people have browsed it

× 目录 [1]float [2]absolute [3]flex [4]总结

前面的话

　　常常听说圣杯布局和双飞翼布局，以为是两个很高级的语汇。但实际上，他们只是三栏式布局的两种布局方法而已。本文将介绍三栏式布局的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>

Copy after login

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="main" style="background-color: lightcoral;">            <p>main</p>            <p>main</p>        </div>        <div class="left" style="background-color: orange;">            <p>left</p>        </div>        <div class="right" style="background-color: lightsalmon;">               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

Copy after login

【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>

Copy after login

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="mainWrap">            <div class="main" style="background-color: lightcoral;">                <p>main</p>                <p>main</p>            </div>                    </div>        <div class="left" style="background-color: orange;">            <p>left</p>        </div>        <div class="right" style="background-color: lightsalmon;">               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

Copy after login

【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>

Copy after login

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="main" style="background-color: lightcoral;">            <p>main</p>            <p>main</p>        </div>                    <div class="left" >            <p>left</p>        </div>        <div class="right" >               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

Copy after login

思路二: 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>

Copy after login

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="main" style="background-color: lightcoral;">            <p>main</p>            <p>main</p>        </div>                      <div class="left" style="background-color: lightseagreen;" >            <p>left</p>        </div>        <div class="right" style="background-color: lightcyan;" >               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

Copy after login

思路三: 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>

Copy after login

<div class="parent" id="parent" style="background-color: lightgrey;">    <div class="top" style="background-color: lightblue;">        <p>top</p>    </div>      <div class="middle" style="background-color: pink;">        <div class="main" style="background-color: lightcoral;">            <p>main</p>            <p>main</p>        </div>                      <div class="left" style="background-color: lightseagreen;" >            <p>left</p>        </div>        <div class="right" style="background-color: lightcyan;" >               <p>right</p>        </div>    </div>              <div class="bottom" style="background-color: lightgreen;">        <p>bottom</p>    </div>        </div>

Copy after login

总结

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