三栏布局实现方法

三栏布局实现方法

面试总是会问到三栏布局，今天我来总结一下

圣杯布局

1. 搞一个容器，里面放三个盒子
2. 设置两侧盒子的宽度(固定)
3. 设置中间盒子的宽度 = 容器的宽度
4. 设置容器的padding: 0 两边盒子的宽度;
5. 让三个盒子在同一个方向上浮动
6. 设置左边盒子的margin-left: -100%;
7. 定位调整左边盒子，让左边盒子不要盖住中间的区域
   position: relative;
   left: -自身宽度;
8. 设置右边盒子的margin-left: -自身宽度；
9. 定位调整左边盒子，让左边盒子不要盖住中间的区域
   positon: relative;
   left: 自身宽度;
10. 给容器设置最小宽度，防止缩小后变形

//结构代码
<div class="container">
   <div class="center"></div>
   <div class="left"></div>
   <div class="right"></div>
  </div>

//样式代码
<style type="text/css">
*{
   margin: 0;
   padding: 0;
  }
  .container{
   background-color: #c9c9c6;
   padding: 0 200px;
   min-width: 400px;
  }
  .left, .right{
   width: 200px;
   height: 200px;
   background-color: tomato;
   float: left;
  }
  .center{
   width: 100%;
   height: 200px;
   background-color: orange;
   float: left;
  }
  .left{
   margin-left: -100%;
   position: relative;
   left: -200px;
  }
  .right{
   margin-left: -200px;
   position: relative;
   left: 200px;
  }
  </style>

双飞翼布局

1. 搞一个容器，里面放三个盒子
2. 设置两侧盒子的宽度(固定)
3. 设置中间盒子的宽度 = 容器的宽度
4. 让三个盒子在同一个方向上浮动
5. 在中间的盒子里再加一个盒子
6. 给子盒子设置 margin: 0 两侧盒子的宽度；
7. 设置左边盒子的margin-left: -100%;
8. 设置右边盒子的margin-left: -自身宽度;

//结构代码
<div class="container">     
     <div class="center">
          <div class="center-in"></div>
     </div>
     <div class="left"></div>
     <div class="right"></div>
</div>

//样式代码
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.left, .right{	
    width: 200px;
    height: 200px;
    background-color: pink;
    float: left;
}
.center{
    width: 100%;
    height: 200px;
    background-color: tomato;
    float: left;
}
.center-in{
    margin: 0 200px;
}
.left{
    margin-left: -100%;
}
.right{
    margin-left: -200px;
}
</style>

注意! 中间盒子要放在两侧盒子之前