实现css两栏布局、右侧自适应、三栏布局中间自适应

前言

     在日常布局中,无论是两栏布局还是三栏布局,使用的频率都非常高。

两栏布局

     两栏布局实现效果是将页面分割成左右宽度不登的两列,宽度较小的列设置为固定高度,剩余宽度由另一列撑满,比如 Ant Design 文档,蓝色区域为主要内容布局容器,侧边栏为次要内容布局容器。

这里称宽度较小的列父元素为次要布局容器，宽度较大的列父元素为主要布局容器

     这种布局适用于内容上具有明显主次关系的网页。

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

大家最常见的就是github：

双栏布局

     双栏布局非常常见，往往是以一个定宽栏和一个自适应的栏并排展示存在

     实现思路也非常的简单：

• 使用 float 左浮左边栏
• 右边模块使用 margin-left 撑出内容块做内容展示
• 为父级元素添加 BFC ，防止下方元素飞到上方内容

代码如下：

 1     <style>
 2         .box{
 3             overflow: hidden; 
 4         }
 5         .left {
 6             float: left;
 7             width: 200px;
 8             background-color: gray;
 9             height: 400px;
10          }
11          .right {
12              margin-left: 210px;
13              background-color: lightgray;
14              height: 200px;
15          }
16      </style>
17      <div class="box">
18          <div class="left">左边</div>
19          <div class="right">右边</div>
20      </div>

flex弹性布局

 1     <style>
 2         .box{
 3             display: flex;
 4         }
 5         .left {
 6             width: 100px;
 7             background-color: pink;
 8         }
 9         .right {
10              flex: 1;
11              background-color: aquamarine;
12          }
13      </style>
14      <div class="box">
15          <div class="left">左边</div>
16          <div class="right">右边</div>
17      </div>

flex可以说是最好的方案了，代码少，使用简单

注意的是，flex容器的一个默认属性值:align-items: stretch;

这个属性导致了列等高的效果。 为了让两个盒子高度自动，需要设置: align-items: flex-start

三栏布局

实现三栏布局中间自适应的布局方式有：

• 两边使用 float ，中间使用 margin
• 两边使用 absolute ，中间使用 margin
• 两边使用 float 和负 margin
• display: table 实现
• flex 实现
• grid 网格布局

两边使用 float，中间使用 margin

需要将中间的内容放在html结构最后，否则右侧会臣在中间内容的下方

实现代码如下：

 1     <style>
 2         .wrap {
 3             background: #eee;
 4             overflow: hidden; 
 5             padding: 20px;
 6             height: 200px;
 7         }
 8         .left {
 9             width: 200px;
10              height: 200px;
11              float: left;
12              background: coral;
13          }
14          .right {
15              width: 120px;
16              height: 200px;
17              float: right;
18              background: lightblue;
19          }
20          .middle {
21              margin-left: 220px;
22              height: 200px;
23              background: lightpink;
24              margin-right: 140px;
25          }
26      </style>
27      <div class="wrap">
28          <div class="left">左侧</div>
29          <div class="right">右侧</div>
30          <div class="middle">中间</div>
31      </div>

原理如下：

• 两边固定宽度，中间宽度自适应。
• 利用中间元素的 margin 值控制两边的间距
• 宽度小于左右部分宽度之和时，右侧部分会被挤下去

这种实现方式存在缺陷：

• 主体内容是最后加载的。
• 右边在主体内容之前，如果是响应式设计，不能简单的换行展示

两边使用 absolute，中间使用 margin

基于绝对定位的三栏布局：注意绝对定位的元素脱离文档流，相对于最近的已经定位的祖先元素进行定位。无需考虑 HTML 中结构的顺序,实现代码如下:

 1     <style>
 2       .container {
 3         position: relative;
 4       }
 5       
 6       .left,
 7       .right,
 8       .main {
 9         height: 200px;
10          line-height: 200px;
11          text-align: center;
12        }
13      
14        .left {
15          position: absolute;
16          top: 0;
17          left: 0;
18          width: 100px;
19          background: green;
20        }
21      
22        .right {
23          position: absolute;
24          top: 0;
25          right: 0;
26          width: 100px;
27          background: green;
28        }
29      
30        .main {
31          margin: 0 110px;
32          background: black;
33          color: white;
34        }
35      </style>
36      
37      <div class="container">
38        <div class="left">左边固定宽度</div>
39        <div class="right">右边固定宽度</div>
40        <div class="main">中间自适应</div>
41      </div>

实现流程：

• 左右两边使用绝对定位，固定在两侧。
• 中间占满一行，但通过 margin 和左右两边留出 10px 的间隔

两边使用 float 和负 margin

实现代码如下:

 1     <style>
 2       .left,
 3       .right,
 4       .main {
 5         height: 200px;
 6         line-height: 200px;
 7         text-align: center;
 8       }
 9     
10        .main-wrapper {
11          float: left;
12          width: 100%;
13        }
14      
15        .main {
16          margin: 0 110px;
17          background: black;
18          color: white;
19        }
20      
21        .left,
22        .right {
23          float: left;
24          width: 100px;
25          margin-left: -100%;
26          background: green;
27        }
28      
29        .right {
30          margin-left: -100px;/* 同自身宽度 */
31        }
32      </style>
33      
34      <div class="main-wrapper">
35        <div class="main">中间自适应</div>
36      </div>
37      <div class="left">左边固定宽度</div>
38      <div class="right">右边固定宽度</div>

实现过程：

• 中间使用了双层标签，外层是浮动的，以便左中右能在同一行展示
• 左边通过使用负 margin-left:-100% ，相当于中间的宽度，所以向上偏移到左侧
• 右边通过使用负 margin-left:-100px ，相当于自身宽度，所以向上偏移到最右侧

缺点：

• 增加了 .main-wrapper 一层，结构变复杂
• 使用负 margin ，调试也相对麻烦

使用 display: table 实现

<table> 标签用于展示行列数据，不适合用于布局。但是可以使用 display: table 来实现布局的效果,实现代码如下:

 1     <style>
 2       .container {
 3         height: 200px;
 4         line-height: 200px;
 5         text-align: center;
 6         display: table;
 7         table-layout: fixed;
 8         width: 100%;
 9       }
10      
11        .left,
12        .right,
13        .main {
14          display: table-cell;
15        }
16      
17        .left,
18        .right {
19          width: 100px;
20          background: green;
21        }
22      
23        .main {
24          background: black;
25          color: white;
26          width: 100%;
27        }
28      </style>
29      
30      <div class="container">
31        <div class="left">左边固定宽度</div>
32        <div class="main">中间自适应</div>
33        <div class="right">右边固定宽度</div>
34      </div>

实现原理：

• 层通过 display: table 设置为表格，设置 table-layout: fixed 表示列宽自身宽度决定，而不是自动计算。
• 内层的左中右通过 display: table-cell 设置为表格单元。
• 左右设置固定宽度，中间设置 width: 100% 填充剩下的宽度

使用flex实现

利用flex弹性布局，可以简单实现中间自适应

代码如下：

  1    <style type="text/css">
  2        .wrap {
  3            display: flex;
  4            justify-content: space-between;
  5        }
  6    
  7        .left,
  8        .right,
  9        .middle {
 10             height: 100px;
 11         }
 12     
 13         .left {
 14             width: 200px;
 15             background: coral;
 16         }
 17     
 18         .right {
 19             width: 120px;
 20             background: lightblue;
 21         }
 22     
 23         .middle {
 24             background: #555;
 25             width: 100%;
 26            margin: 0 20px;
 27         }
 28     </style>
 29     <div class="wrap">
 30         <div class="left">左侧</div>
 31         <div class="middle">中间</div>
 32         <div class="right">右侧</div>
 33     </div>

实现过程：

• 仅需将容器设置为display:flex;，
• 盒内元素两端对其，将中间元素设置为100%宽度，或者设为flex:1，即可填充空白
• 盒内元素的高度撑开容器的高度

优点：

• 结构简单直观
• 可以结合 flex的其他功能实现更多效果，例如使用 order属性调整显示顺序，让主体内容优先加载，但展示在中间

grid网格布局

代码如下：

 1     <style>
 2         .wrap {
 3             display: grid;
 4             width: 100%;
 5             grid-template-columns: 300px auto 300px;
 6         }
 7     
 8         .left,
 9         .right,
10          .middle {
11              height: 100px;
12          }
13      
14          .left {
15              background: coral;
16          }
17      
18          .right {
19              width: 300px;
20              background: lightblue;
21          }
22      
23          .middle {
24              background: #555;
25          }
26      </style>
27      <div class="wrap">
28          <div class="left">左侧</div>
29          <div class="middle">中间</div>
30          <div class="right">右侧</div>
31      </div>

跟flex弹性布局一样的简单