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

最新推荐文章于 2024-03-06 14:42:16 发布

IT程序员的日常

最新推荐文章于 2024-03-06 14:42:16 发布

阅读量1k

点赞数

分类专栏： javascript从入门到精通文章标签： CSS CSS三栏布局前端布局 less

本文链接：https://blog.youkuaiyun.com/FengyCoder/article/details/86569853

版权

javascript从入门到精通专栏收录该内容

8 篇文章

订阅专栏

本文探讨了前端开发中三栏布局的实现，包括浮动布局、flex布局、绝对定位、BFC、table、网格(grid)布局、圣杯布局和双飞翼布局，每种方法都提供了相应的HTML和less CSS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

什么是三栏布局？

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

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

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

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

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>
    <!--方式1-浮动布局-->
    <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>
     <!--方式2.flex布局-->
    <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>
     <!--方式3.绝对定位-->
     <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>
    <!--方式4-BFC-->
    <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>
    <!--方式5.table-->
    <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>
   <!--方式6.网格grid布局-->
    <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>
   <!--方式7.圣杯布局-->
    <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>
   <!--8.双飞翼布局-->
    <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布局