三栏布局(双飞翼、圣杯、绝对定位、浮动、flex布局)

一、浮动和负边距（双飞翼和圣杯布局）

1、双飞翼布局

实现：

· left、center、right三种都设置左浮动
·设置center宽度为100%
· 设置负边距，left设置负边距为100%，right设置负边距为自身宽度
·设置content的margin值为左右两个侧栏留出空间，margin值大小为left和right宽度

html:

<div class="wrap">
        <div class="center">
        	<div>这是中间 这是中间 这是中间/div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

css:

.wrap{
    width: 80%;
    border: 1px red solid;
    overflow: hidden;
    box-sizing:border-box;
}
.wrap>div{
    height: 300px;
}
.left{
    float: left;
    width: 200px;
    background-color: green;
    margin-left: -100%;
}
.right{
    float: left;
    width: 250px;
    background-color: blue;
    margin-left: -250px;
}
.center{
    float: left;
    width: 100%;
    background-color: yellow;
}
.center div{
    margin-left: 200px;//给有字体的div设置外边距
    margin-right: 250px;
    height: 100%;
}

效果图：

2、圣杯布局

实现：

· left、center、right三种都设置左浮动
· 设置center宽度为width:100%,让其单独占满一行 ·
· 设置left和right 负的外边距（具体请看margin-left代码注释，此时center两边是左右两块留白区域） ·
· 把left和right分别移动到留白处，使用相对定位移动left和right部分。

html:

<div class="wrap">
        <div class="center">这是中间 这是中间 这是中间</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

css:

.wrap{
    width: 80%;
    border: 1px red solid;
    overflow: hidden;
    padding: 0 250px 0 200px;
    box-sizing:border-box;
}
.wrap>div{
    height: 300px;
}
.left{
    float: left;
    width: 200px;
    background-color: green;
    margin-left: -100%;//向左移动一整行的距离
    position: relative;
    left:-200px;
}
.right{
    float: left;
    width: 250px;
    background-color: blue;
    margin-left: -250px;//向左移动自身宽度的距离
    position: relative;
    right: -250px;
}
.center{
    float: left;
    width: 100%;
    background-color: yellow;
}

3、双飞翼布局与圣杯布局的区别

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，

圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现。

双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

双飞翼布局比圣杯布局多使用了1个div，少用大致4个css属性（圣杯布局container的 padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，；而双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单说起来就是：双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了。

二、绝对定位

实现：

左右两边绝对定位，中间自适应

html:

<div class="main">
    <div class="left">左侧固定</div>
    <div class="content">自适应区域</div>
    <div class="right">右侧固定</div>
</div>

css:

	 .main {
      position: relative;
    }
    .main div{
      height: 400px;
    }
    .left{
      position: absolute;
      left:0;
      width: 300px;
      background-color: green;
    }
    .right{
      position: absolute;
      right:0;
      width: 300px;
      background-color: blue;
    }
    .content{
      position: absolute;
      left:300px;
      right: 300px;
      background-color: yellow;
    }

三、浮动布局

实现：

左边左浮动，右边右浮动，中间自适应

html:

<div class="main">
    <div class="left">左侧固定</div>
    <div class="right">右侧固定</div>
    <div class="content">自适应区域</div>
</div>

css:

	.main {
      overflow: hidden;
    }
    .left {
      float: left;
      width: 300px;
      height: 300px;
      background-color: green;
    }
    .right {
      float: right;
      width: 300px;
      height: 300px;
      background-color: blue;
    }
    .content {
      height: 300px;
      background-color: yellow;
    }

四、flex布局

实现：

左右两边flex-bassi设置宽，中间用flex-grow索取父元素的剩余空间

html:

 <div class="main">
    <div class="left">左侧固定</div>
    <div class="content">自适应区域</div>
    <div class="right">右侧固定</div>
</div>

css:

	.main{
      display: flex;
    }
    .left,.right {
      flex: 0 0 300px;//设置宽为300
      background-color:red
    }
    .content {
      flex: 1;//索取父元素的剩余空间
      background-color:green;
    }

注：如果html按content、left、rigth排序，把left的order设为-1，即可把left提到前面去