浅谈三栏布局-八种实现（less语法）

港控/mmm° 2022-03-25 13:18 258阅读 0赞

前端中布局方式多样，今天我们浅谈一下三栏布局的几种实现方式，希望对你有所帮助。

**目录**

什么是三栏布局？

1.浮动布局实现：

2.flex布局实现

3.绝对定位实现

4.BFC实现

5.table实现：

6.网格（grid）布局

7.圣杯布局

8.双飞翼布局

总结：

--------------------

## **什么是三栏布局？** ##

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

**三栏布局常见的实现方式：**

*  浮动布局
 *  flex布局
 *  绝对定位
 *  BFC
 *  table
 *  网格（grid）布局
 *  圣杯布局
 *  双飞翼布局

废话不多说，直接上图，关于三栏布局情况如下图所示

![20190121102317297.png][]

### **1.浮动布局实现：** ###

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-8种实现</title>
        <link rel="stylesheet/less" href="less/index.less" type="text/css">
    </head>
    <body>
        
        <div class="float">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="main">center</div>
        </div>
    <script src="js/less.js"></script>
    </body>
    </html>

CSS代码（less语法）:

*{
      margin: 0;
      padding: 0;
    }
    
    /*1.浮动布局*/
    .float{
      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;
      }
    }

### 2.flex布局实现 ###

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-8种实现</title>
        <link rel="stylesheet/less" href="less/index.less" type="text/css">
    </head>
    <body>
         
        <div class="flexBox">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="main">center</div>
        </div>
    <script src="js/less.js"></script>
    </body>
    </html>

CSS代码（less语法）:

/*2.flex布局*/
    .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;
       }
     }

### 3.绝对定位实现 ###

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-8种实现</title>
        <link rel="stylesheet/less" href="less/index.less" type="text/css">
    </head>
    <body>
         
         <div class="position">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="main">center</div>
        </div>
    <script src="js/less.js"></script>
    </body>
    </html>

CSS代码（less语法）:

/*绝对定位*/
    .position{
      position: relative;
      text-align: center;
      line-height: 100px;
      .left{
        width: 100px;
        height: 100px;
        background-color: #ddd;
        position: absolute;
        left: 0;
      }
      .right{
        width: 100px;
        height: 100px;
        background-color: #ddd;
        position: absolute;
        right:0;
      }
      .main{
        height: 100px;
        background: #ccc;
      }
    }

### 4.BFC实现 ###

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-8种实现</title>
        <link rel="stylesheet/less" href="less/index.less" type="text/css">
    </head>
    <body>
        
        <div class="BFC">
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="main">center</div>
        </div>
    <script src="js/less.js"></script>
    </body>
    </html>

CSS代码（less语法）:

/*4.BFC方式*/
    .BFC{
      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-color: #ccc;
        //触发BFC
        overflow: hidden;
      }
    }

### 5.table实现： ###

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-8种实现</title>
        <link rel="stylesheet/less" href="less/index.less" type="text/css">
    </head>
    <body>
        
        <div class="tableBox">
             <div class="left">left</div>
            <div class="right">right</div>
            <div class="main">center</div>
        </div>
    <script src="js/less.js"></script>
    </body>
    </html>

CSS代码（less语法）:

/*5.table*/
    .tableBox{
      // 要设置父元素宽度
      width: 100%;
      display: table; // 每一个子元素都要设置display:table-cell
      text-align: center;
      line-height: 100px;
      .left{
        width: 100px;
        height: 100px;
        background-color: #ddd;
        display:table-cell;
      }
      .right{
        width: 100px;
        height: 100px;
        background-color: #ddd;
        display:table-cell;
      }
      .main{
        height: 100px;
        background-color: #ccc;
        display:table-cell;
      }
    }

### 6.网格（grid）布局 ###

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-8种实现</title>
        <link rel="stylesheet/less" href="less/index.less" type="text/css">
    </head>
    <body>
       
        <div class="gridBox">
            <div class="left">left</div>
            <div class="main">center</div>
            <div class="right">right</div>
        </div>
    <script src="js/less.js"></script>
    </body>
    </html>

CSS代码（less语法）:

/*6.网格布局*/
    .gridBox{
      // 只需要父元素设置即可
      display: grid;
      grid-template-rows: 100px;/*设置行高*/
      grid-template-columns: 100px auto 100px;/*设置列数属性*/
      text-align: center;
      line-height: 100px;
      .left{
        background-color: #ddd;
      }
      .right{
        background-color: #ddd;
      }
      .main{
        background-color: #ccc;
      }
    }

### 7.圣杯布局 ###

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-8种实现</title>
        <link rel="stylesheet/less" href="less/index.less" type="text/css">
    </head>
    <body>
       
        <div class="hollyCupBox">
            <div class="left">left</div>
            <div class="main">center</div>
            <div class="right">right</div>
        </div>
    <script src="js/less.js"></script>
    </body>
    </html>

CSS代码（less语法）:

/*7.圣杯布局*/
    
    .hollyCupBox{
      // 父元素也需要两边空出100px
      margin: 0 100px;
      text-align: center;
      line-height: 100px;
      .left{
        width: 100px;
        height: 100px;
        background-color: #ddd;
        float: left;
        position: relative;
        left:-100px;
        margin-right:-100%;
      }
      .right{
        width: 100px;
        height: 100px;
        background-color: #ddd;
        float: left;
        position: relative;
        right: -100px;
        margin-left: -100px;
      }
      .main{
        width: 100%;
        height: 100px;
        background-color: #ccc;
        float: left;
      }
    }

### 8.双飞翼布局 ###

HTML代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>三栏布局-8种实现</title>
        <link rel="stylesheet/less" href="less/index.less" type="text/css">
    </head>
    <body>
       
        <div class="doubleFly">
            <div class="container">
                <div class="main">center</div>
            </div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    <script src="js/less.js"></script>
    </body>
    </html>

CSS代码（less语法）:

/*8.双飞翼布局*/
    
    .doubleFly {
      line-height: 100px;
      text-align: center;
      .container {
        width: 100%; // 全都是浮动
        float: left;
        .main {
          // 空出两边间隔
          margin: 0 100px;
          height: 100px;
          background-color: #ccc;
        }
      }
      .left {
        float: left;
        // 关键地方，这个100是整个父元素的宽度
        margin-left: -100%;
        height: 100px;
        background-color: #ddd;
        width: 100px;
      }
      .right {
        float: right;
        // 关键地方
        margin-left: -100px;
        height: 100px;
        background-color: #ddd;
        width: 100px;
      }
    }

--------------------

### 总结： ###

1.圣杯布局、双飞翼布局、flex布局的高度取决于内容区(center部分)，页面的高度取决于内容区 2.绝对定位的内容区高度取决于两边栏的最高点。 3.table-cell布局能让三栏的高度一致，但不能优先渲染 center。 4.网格布局极其强大，但兼容性差 5.浮动：脱离文档流，需要清除浮动；但兼容性比较好 6.绝对定位：快；但是需要处理下面元素的位置 7.Flex：目前比较完美的方案，特别是移动端 8.思考这些布局的优缺点？ 9.尝试使用flex+rem布局

[20190121102317297.png]: /images/20220325/4dd706cb0ddd467f8e1ae178fe7f02a5.png