CSS-三列布局兼容IE8+

段代码并非那么“正统”，而且圣杯布局因兼容性考虑需要给body设置最小宽度min-width

三列布局圣杯布局的解释如果加 left，right，middle 加上间距的话，需要调整margin：left 的值，父容器调整margin：20px的值。

vue版三列布局(中间有20的间隔)：

<template>
  <div class="three-column" ref="page">
    <div id="center" class="column">
      <div class="box">
        <div class="top">
          中间top
        </div>
        <div class="bottom">
          中间bottom
        </div>
      </div>
    </div>
    <div id="left" class="column" ref="left">
      <div class="box">
        我是left
      </div>
    </div>
    <div id="right" class="column" ref="right">
      <div class="box">
        我是right
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  $leftWidth:287px;
  $rightWidth:305px;
  .three-column{
    min-width: 1024px;
    margin: 20px;
    padding-left: $leftWidth;
    padding-right: $rightWidth;
    .column{
      float: left;
      height: 100%;
      padding: 0 10px;
      .box{
        height: 100%;
        box-sizing: border-box;
        border-radius: 4px;
        text-align: center;
        border: 1px solid blue;
        .top{
          padding: 10px;
          border-bottom: 1px solid blue;
        }
        .bottom{
          padding: 10px;
        }
      }
    }
    #left{
      width: $leftWidth;
      margin-left: -100%;
      position: relative;
      right: $leftWidth;
      padding-left: 0;
    }
    #center{
      width: 100%;
    }
    #right{
      margin-right:-$rightWidth;
      width: $rightWidth;
      padding-right: 0;
    }
  }
</style>

设置relative的元素可以使用位移属性（top right bottom left以前也知道但是没怎么用不熟练）；margin和位移属性可以同时/叠加使用；通过容器设置float以及子元素设置absolute使得容器高度为0（未设置固定高度，默认为auto），可以让容器后面的元素“上移”到子元素同行而不会被“往下推”。以下布局不建议在项目里使用，如果内容超出左侧列，右侧列的高度，出现滚动条，样式就会乱掉。三列布局

yangsirgo / good-good-study

CSS-三列布局兼容IE8+ #9