实例演示列间隙的两种解决方案，外加一个等高列的案例 -

列间隙的两种解决

使用百分比方式解决，但是列间隙会随着视口的大小而动态变化。
使用百分比加em的方式解决，列间隙几乎不会随着大小而动态变化，但是会根据字体大小变化；使用时要用到calc(*% +/- *em)，注意加减符号左右两边必须要有一个空格。

实例上代码，代码里面有注释，可以参考，欢迎指正

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子列间隙演示</title>
    <style>
      header,
      main,
      aside {
        background-color: bisque;
        border-radius: 0.5em;
        /* 给盒子设置列间隙时需要把盒子设定为怪异盒子，这样盒子的大小追加上padding和border 不容易出错 */
        box-sizing: border-box;
      }
      main,
      aside {
        /* 这里我使用了浮动 */
        float: left;
        padding: 1em;
      }
      /* 这是第一种方法，使用百分比调整列间隙 */
      .box1 {
        width: 69%;
        /* 现在我随机选了一个主体减少1%，其实左右都可以，然后给主体右边加上外边距
      也就是margin-righ，值为1%， */
        margin-right: 1%;
      }
      .box2 {
        width: 30%;
      }
      /* 现在使用第二种方法，也就是百分比加em的方式 */
      /* 为了有参照物，我使用了四个盒子，并加上了上边距，这样好区分 */
      .box3 {
        width: 70%;
        margin-top: 1em;
        background-color: aquamarine;
      }
      .box4 {
        width: calc(30% - 1em);
        margin-left: 1em;
        margin-top: 1em;
        background-color: aquamarine;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>盒子列间隙演示方法，这是一个标题</h1>
    </header>
    <div>
      <main class="box1">这是主体部分 ，我需要他和侧边栏并列，中间可能需要用到浮动</main>
      <aside class="box2">这是侧边栏，这块需要和主体部分并列，</aside>
      <main class="box3">这是参照物，这是参照物，这是参照物</main>
      <aside class="box4">这是参照物，这是参照物，这是参照物，这是</aside>
    </div>
  </body>
</html>

效果图：

当视口变化时：

等高案例

上代码！

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>盒子列间隙演示</title>
    <link rel="stylesheet" href="等高列.css" />
  </head>
  <body>
    <header>
      <h1>盒子列间隙演示方法，这是一个标题</h1>
    </header>
     <!-- 最后调整左右两边间距时需要给主体和侧边栏整体套个壳子 -->
    <div class="box9">
      <!-- 为了定义内容为表格，所以给主体和侧边栏加个容器，方便定义为表格 -->
      <div class="box">
        <main class="box1">这是主体部分 ，我需要他和侧边栏等高，</main>
        <aside class="box2">这是侧边栏，这块需要和主体部分并列等高，侧边栏侧边栏侧边侧边栏</aside>
      </div>
    </div>
  </body>
</html>

css代码如下

main,
aside {
  background-color: aqua;
  border-radius: 0.5em;
  box-sizing: border-box;
}
/* 这里定义内容为表格，和设置内容之间的间隙 */
.box {
  display: table;
  width: 100%;
  border-spacing: 1.5em 0;
}
/* 把表格内容里面的定义成单元格  */
.box1,
.box2 {
  display: table-cell;
}
.box1 {
  width: 70%;
}
.box2 {
  width: 30%;
}
/* 调整因为之前按设置的单元格间隙而引起的左右两边有间隔 */
.box9 {
  margin-left: -1.5em;
  margin-right: -1.5em;
}

效果图