CSS三栏布局几种常用方案

最新推荐文章于 2023-10-01 20:09:08 发布

Blateyang

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量335

点赞数

分类专栏： Web学习文章标签： css

本文链接：https://blog.csdn.net/Blateyang/article/details/109148239

版权

Web学习专栏收录该内容

19 篇文章 2 订阅

订阅专栏

1 引言

三栏布局是比较常见的一种网页布局方式，其基本要求是分左中右三栏，左右两栏等宽，中间栏宽度自适应，大致效果如下图所示。
在这里插入图片描述实现三栏布局的方式有很多，本文主要介绍三种简单常用的方案：浮动布局方案、弹性布局方案、网格布局方案还有一个逼格高的双飞翼布局方案。

2 浮动布局方案

浮动布局方案的基本思路是利用float:left和float:right实现，并注意要将两侧栏放在中心内容前面，代码如下：

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  .sidebar {
      background: red;
      height: 100px;
      width: 50px;
      float: left;
    }

    .rightbar{
      float: right;
    }

    .main {
      background: blue;
      height: 100px;
      overflow: auto; /* 创建bfc（block formating context）避免内容被浮动div遮挡*/
    }
</style>
</head>
<body>
  <p>三栏布局</p
  <div class="layout">
    <div class="sidebar leftbar">left</div>
    <div class="sidebar rightbar">right</div>
    <div class="main">center</div>  
  </div>
</body>
</html>

demo参看链接CodePen

3 弹性布局方案

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  .container {
	display: flex;
	}
	
  .sidebar {
      background: red;
      height: 100px;
      width: 50px;
    }
     
    .main {
      background: blue;
      height: 100px;
      flex: 1;
    }
</style>
</head>
<body>
  <p>三栏布局</p>
  <div class="container">
    <div class="sidebar leftbar">left</div>
    <div class="main">center</div> 
    <div class="sidebar rightbar">right</div>
  </div>
</body>
</html>

4 网格布局方案

主要利用了强大的网格布局的 grid-template-columns属性，代码如下：

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  .sidebar {
      background: red;
      height: 100px;
      width: 50px;
    }
    .main {
      background: blue;
      height: 100px;
    }
    .grid3column {
      display: grid;
      grid-template-columns: 50px 1fr 50px;/*fr是网格轨道的弹性系数flexratio*/
    }
</style>
</head>
<body>
  <p>三栏布局</p>
  <div class="grid3column">
    <div class="sidebar leftbar">left</div>
    <div class="main">center</div> 
    <div class="sidebar rightbar">right</div>
  </div>
</body>
</html>

效果
在这里插入图片描述

5 双飞翼布局

为了便于中间包含内容的div优先加载，双飞翼布局会将中div放在最前面，html部分代码如下

  <div class="layout">
    <div class="center">cneter</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>

双飞翼布局主要分为4步：

使用float:left使左中右3个div向左浮动布局，并且将中div的width设为父div宽度


    .layout {
      width: 800px;
      height: 100px;
      border: 1px solid black;
    }
    
    .layout div {
      float: left;
    }

    .center {
      background-color: red;
      width: 100%;
    }

第1步会导致左右div被挤到第二行，使用负margin值（正margin表示相隔距离，负margin可以理解成反向的相叠）可以使3个div处于同一水平线，但中div的部分content会被左div覆盖

    .left {
      background-color: green;
      width: 200px;
      margin-left: -100%; /* 距父容器右边界100%且在其左侧 */
    }

    .right {
      background-color: blue;
      width: 200px;
      margin-left: -200px;
    }

在这里插入图片描述

在中div内在添加一个内容div，并将其左右margin分别设为左右两栏的宽度

  <div class="layout">
    <div class="center">
      <div class="content">cneter</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>

最后记得给父容器清除浮动（因浮动布局导致的内容坍缩问题，即下图的黑色边框塌陷为一条线了）

	.layout {
      width: 800px;
      height: 100px;
      border: 1px solid black;
      overflow: auto; /* 清除浮动 */
    }
    .content {
      margin-left: 200px;
      margin-right: 200px;
    }

最后附上完整的双飞翼布局代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
     .layout {
      width: 800px;
      height: 100px;
      border: 1px solid black;
      overflow: auto; /* 清除浮动 */
    }

    .layout div {
      float: left;
    }

    .center {
      background-color: red;
      width: 100%;
    }

    .content {
      margin-left: 200px;
      margin-right: 200px;
    }
    .left {
      background-color: green;
      width: 200px;
      margin-left: -100%;
    }

    .right {
      background-color: blue;
      width: 200px;
      margin-left: -200px;
    }
  </style>
</head>
<body>
  <p>双飞翼布局</p>
  <div class="layout">
    <div class="center">
      <div class="content">cneter</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

demo演示参看链接CodePen

6 总结

前3种方案相对更简单，第一种div左右中排列，主要就是使用浮动布局和bfc避免被浮动元素遮挡，第二种和第三种左中右排列，一个直接使用网格水平布局实现, 一个直接使用弹性布局实现；最后一种方案中左右排列，要相对复（bi）杂(ge)一(geng)些(gao)，主要内容会优先加载，综合运用了浮动布局、负margin属性、清除浮动等技术。当然网上还有一些其它的实现方案，比如用绝对定位absolute position实现、用表格布局table/table-cell实现以及与双飞翼布局类似的圣杯布局（浮动+负margin+含有负值的relative position），CSS提供了各式各样的布局方案，基本都可以实现三栏布局，掌握几种常用的即可。

参考资料：
[1] 三栏布局的多种实现
[2] 深入负CSS边距
[3] MDN:grid-template-columns
[4] MDN:含有负值的position实验

Blateyang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS三栏布局几种常用方案

双飞翼布局是比较常见的一种网页布局方式，其基本要求是分左中右三栏，左右两栏等宽，中间栏宽度自适应，大致效果如下图所示。为了便于中间包含内容的div优先加载，在布局时将中div放在最前面，html部分代码如下 <div class="layout"> <div class="center">cneter</div> <div class="left">left</div> <div class="right"&gt
复制链接

扫一扫