html中的两种列间隙方法以及table型的等高列 -

1、实现列间隙的方法

在html代码中，想要实现列间隙，无非就是设置盒子的margin值，在这里有两种可以实现的方法，我们举例演示。

1、直接用百分比来进行设置

<head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
      }
      :root,
      ::after,
      ::before {
        background-color: #eee;
        box-sizing: border-box;
      }
      .box1,
      .box2 {
        background-color: #cccccc;
        border-radius: 1em;
        padding: 1em;
        float: left;
      }
      .box1 {
        width: 70%;
      }
      .box2 {
        width: 29%;
        margin-left: 1%;
      }
    </style>
  </head>
  <body>
    <div class="box3">
      <div class="continal">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
    </div>
  </body>

2、列间隙用em来设置

<head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
      }
      :root,
      ::after,
      ::before {
        background-color: #eee;
        box-sizing: border-box;
      }
      .box1,
      .box2 {
        background-color: #cccccc;
        border-radius: 1em;
        padding: 1em;
        float: left;
      }
      .box1 {
        width: 70%;
      }
      .box2 {
        width: calc(30% - 1em);
        margin-left: 1em;
      }
    </style>
  </head>
  <body>
    <div class="box3">
      <div class="continal">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
    </div>
  </body>

2、用table表格的形式来实现一个等高列

想用表格的形式实现等高列，首先我们需要将页面的布局方式改成表格形式，之后才能进行等高的操作。最后为了页面的美观，我们需要在表格的外部放一个盒子把它包起来，通过设置盒子的margin，使表格和页面的其他部分等宽。

实例演示：

  <head>
    <meta charset="utf-8" />
    <title>123</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
      }
      :root,
      ::after,
      ::before {
        background-color: #eee;
        box-sizing: border-box;
      }
      header {
        background-color: #0072b0;
        color: #ffffff;
        text-align: center;
        border: 2px solid;
        border-radius: 0.5em;
      }
      .continal {
        display: table;
        width: 100%;
        border-spacing: 1.5em 0;
      }
      .box1,
      .box2 {
        background-color: #cccccc;
        border-radius: 1em;
        padding: 1em;
        margin-top: 1em;
        display: table-cell;
      }
      .box1 {
        width: 70%;
        height: 30vh;
      }
      .box2 {
        width: calc(30% - 1em);
        margin-left: 1em;
      }
      .box3 {
        margin-left: -1.5em;
        margin-right: -1.5em;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>等高列</h1>
    </header>
    <div class="box3">
      <div class="continal">
        <div class="box1"></div>
        <div class="box2"></div>
      </div>
    </div>
  </body>