CSS实现经典的三栏布局

实现效果： 左右栏定宽，中间栏自适应 (有时候是固定高度)

1 . 绝对定位布局：position + margin

<div class="container">
    <div class="left">左</div>
    <div class="right">右</div>
    <div class="main">中</div>
</div>

body,html{
    height: 100%;
    padding: 0;
    margin: 0;
   overflow: hidden;
}
    /*左右进行绝对定位*/
.left,.right{
    position: absolute;
    height:100%;  
    top: 0;
}
.left{
    left: 0;
    width: 100px;
    background: red;
}
.right{
    right: 0;
    width: 100px;
    background: blue;
}
    /*中间用margin空出左右元素所占的空间*/
.main{
   height:100%; 
   margin: 0 100px 100px 0;   /* 也可让 position的 left和right分别为100px;*/
   background: yellow;
}
     

缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况

2 . 浮动布局：  float + margin

方法类似 position, 改成 float: left 和 float: right即可

.left {
  float: left;
}

.right {
  float: right;
}

.main {
  margin: 0 100px;   // 如不设置margin, main部分将会占满整个父容器
}

3 . flex布局

　　

.container {
  display: flex;
}

.main {
  flex: 1;
}

4  .  table 布局

原理： 将父容器当作表格，子容器当作表格的单元格。

.container {
   display: table;  
}

.container > div {
  display: table-cell;
}

5 . grid网格布局

　　父容器设置为网格，网格的子元素行高rows为100px; 网格子元素列宽分别为 100px auto 100px;

.container {
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: 100px auto 100px;  
}

6. 圣杯布局 （想象成圣杯的主体和两只耳朵）

　　圣杯布局是2006年提出的布局模型概念，在国内由淘宝UED工程师改进并传播， 布局要求：

　　1 ） 三列布局， 中间宽度自适应，两边定宽

　　2 ） 中间栏要在浏览器中优先渲染

　　3 ） 允许任意列的高度最高

参考

<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

  .container {
        padding: 0 150px 0 100px;
    }
    .left, .main, .right {
        position: relative;
        min-height: 100px;
        float: left;
    }
    .left {
        left: -100px;
        margin-left: -100%;
        background: green;
        width: 100px;
    }
    .right {
        right: -150px;
        margin-left: -150px;
        background-color: red;
        width: 100px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }

思路： 圣杯布局用到了浮动float、负边距、相对定位relative，不添加额外标签

1 . 父容器设置内边距，供两边子容器占位 padding: 0 100px 0 150px;

2 . 所有子容器向左浮动 float: left

3 . 设置左右子容器的负外边距，使所有子容器同一行 .left { margin-left: -100%} .right {margin-left: -150px;} , 此时会有部分重叠

4 . 使用相对定位分别移动左右子容器到父容器的左右内边距留白部分 position: relative; left: -100px;  / position: relative; right: -150px;

 

 

7. 双飞翼布局(想象成鸟的身体和两只翅膀)

　　1 )　双飞翼布局是对圣杯布局基础上进行修改 ， 将原本的内边距padding 留白改成在自适应栏内部新增DOM节点， 并设置其外边距margin

　　2 )   然后再对左右栏的左外边距设置为负值。比圣杯布局少了position相对定位

　　3 )  相比圣杯布局， 中间栏内容不会被“遮挡”, 圣杯布局使用中间栏的padding给左右栏占位，双飞翼布局使用中间栏子元素的margin给左右栏占位 

<div class="container"> 
　　<div class="main">
    　　<div class="content">main</div> 
    </div>
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>

.left, .main, .right {
        float: left;
        min-height: 100px;
        text-align: center;
    }
    .left {
        margin-left: -100%;
        background: green;
        width: 100px;
    }

    .right {
        margin-left: -150px;
        background-color: red;
        width: 150px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }
    .content{
        margin: 0 150px 0 100px;
    }

基本思路已经理清楚，可以在实践中看效果。