来总结下传说中的三栏布局（圣杯布局、双飞翼布局、flex）

发表于 | 分类于

一种三列布局，两边定宽，中间自适应；中间栏要放在文档流前面以优先渲染

圣杯布局

  1. 下面是HTML部分
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div id="container">
        <div id="main" class="col">
        #main
        </div>
        <div id="left" class="col">
        #left
        </div>
        <div id="right" class="col">
        #right
        </div>
    </div>
  1. 下面是CSS部分
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    body {min-width: 550px;}
    .col {position: relative;float: left;}
    #container {padding: 0 190px 0 190px;}
    #main {width: 100%;height: 400px;background-color: #ccc;}
    #left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}
    #right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}
  • 先用浮动把3个div并排列出来，中间div宽度设为100%，两边宽度定出来；这样的效果是：main全屏宽度，left和right会被挤压到第二排并列；
  • margin-left:-100%和margin-left:-190px(right的宽度)；这样的效果是：left和right覆盖在main的左右两端；
  • .container{padding:0 190px 0 190px}空出左右两边的位置，left:-190px;right:-190px；这样的效果是：把main压缩起来腾出左右两端位置，left和right定位到左右两端

双飞翼布局：实现目标相同，与圣杯布局相比，双飞翼HTML中为main添加了一个子元素main-wrap,这个小小的改动是为了之后处理main中内容被遮盖的问题，这也是两者实现方式最大的不同点

  1. 下面是HTML部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="container">
        <div id="main" class="col">
            <div id="main-wrap">
             #main
            </div>
        </div>
        <div id="left" class="col">
        #left
        </div>
        <div id="right" class="col">
        #right
        </div>
    </div>

  2. 下面是CSS部分

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    body {min-width: 550px;}
    .col {float: left;}
    #main {width: 100%;height: 400px;background-color: #ccc;}
    #main-wrap {margin: 0 190px 0 190px;}
    #left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}
    #right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}

区别在于第三个步骤，双飞翼布局是利用.main-wrap{margin: 0 190px 0 190px;}空出左右两边位置。因为不需要left,right定位，所以不需要position:relative属性

flex方案

  1. 下面是HTML部分：

    1
    2
    3
    4
    5
    <div id="container">
        <div id="left">#left</div>
        <div id="main">#mian</div>
        <div id="right">#right</div>
    </div>

  2. 下面是CSS部分

    1
    2
    3
    4
    #container{display: flex;flex-direction: row;}
    .main{flex:1; background: grey;}
    .left{width:190px;height:400px;background: #0000FF;}
    .right{width:190px;height:400px;background:#FF0000;}

缺点是ie的兼容性不好，没有达到优先加载中间div的目的

谢谢你请我吃糖果！