| 三栏布局

三栏布局特点：整体高度已知，左右两边宽度固定，中间内容宽度自适应。

浮动布局方案

这里使用了 less 语法，所以需要下载 less.min.js 文件，官网地址：https://less.bootcss.com/#，下同。

html 文件 >>

    
    
    
    


    

        
left
        
right
        
center
        
    

less 文件 >>

.floatBox{
    text-align : center;
    line-height: 100px;

    .left {
        width           : 100px;
        height          : 100px;
        background-color: #ddd;
        float           : left;
    }

    .right {
        width           : 100px;
        height          : 100px;
        background-color: #ddd;
        float           : right;
    }

    .main {
        height    : 100px;
        background: #ccc;
    }
}

布局分析：

• 对两侧边栏子项设置固定宽度，设置浮动
• 对 main 栏子项不设置宽度，让其继承父盒子的宽度（不可设置为浮动，否则宽度由内容决定）

flex 布局方案

html 文件 >>

    
    
    
    


    

        
left
        
center
        
right
    

less 文件 >>

.flexBox {
    display    : flex;
    text-align : center;
    line-height: 100px;

    .left {
        width           : 100px;
        height          : 100px;
        background-color: #ddd;
    }

    .right {
        width           : 100px;
        height          : 100px;
        background-color: #ddd;

    }

    .main {
        height          : 100px;
        background-color: #ccc;
        flex            : 1;
    }
}

布局分析：

• 对父盒子设置 flex，开启弹性布局
• 对两侧边栏子项设置固定宽度，并且不设置 flex 的值
• 对 main 栏子项不设置宽度，并且设置 flex 的值
• 于是，main 栏继承了剩余可用宽度的 100%

圣杯布局方案

html 文件 >>

    
    
    
    


    

        
left
        
center
        
right
    

less 文件 >>

.holyCupBox {
    margin     : 0 100px;
    text-align : center;
    line-height: 100px;

    .left {
        width           : 100px;
        height          : 100px;
        background-color: #ddd;
        float           : left;
        position        : relative;
        margin-right    : -100px;
        left            : -100px;
    }

    .right {
        width           : 100px;
        height          : 100px;
        background-color: #ddd;
        float           : left;
        position        : relative;
        margin-left     : -100px;
        right           : -100px;
    }

    .main {
        width           : 100%;
        height          : 100px;
        background-color: #ccc;
        float           : left;
    }
}

布局分析：

• 对父盒子设置左右外边距，作为两侧边栏的位置
• 对三栏区域（子盒子）设置浮动
• 对 left 栏设置相对定位和右外边距，然后左移、出父盒子范围，占据其左外边距位置
• 对 right 栏设置相对定位和左外边距，然后右移、出父盒子范围，占据其右外边距位置
• main 栏继承了父盒子的全部宽度