高效设置列间距的方法，以及用“表格”设置等高列的思考

一、列间距的设置：

通过设置 margin 来实现列间距，目前有两种方法： 1.通过百分比设置 2.通过（百分比 - em ）来实现（推荐使用）

1. 第一种方法

设置百分比

代码部分

    <style>
        body {
            background-color: #f1f1f1;
            /* 把盒子设置为IE盒子 */
            box-sizing: border-box;
        }
        .container {
            background-color: rgb(46, 101, 250);
            border-radius: 0.5em;
            text-align: center;
            color: #fff;
        }
        /* 将main转换为块元素 */
        .main {
            display: block;
            width: 70%;
        }
        .main ,.right {
            border: 1px solid #333;
            border-radius: 0.5em;
            background: #fff;
            float: left;
        /* 将main和right转换为IE盒子 */
            box-sizing: border-box;
        }
        /* 把右边的块元素撑开 */
        .right {
            padding: 1.5em;
        }
        /* 第一种设置列间距的方法 */
        /* 1. 用相对单位百分比来设置 */
        .right {
            width: 29%;
            margin-left: 1%;
        }
    </style>

总结：

将右列（right）的宽度设置为 29%，然后设置左侧外边距为 1%，即 margin-left: 1%

虽然通过设置百分比，得到了我们想要的效果。但是，在改变视窗大小后，块元素之间的间距大小也会随之改变，在一些特定场景下，我们是不希望出现这种情况的。所以，这种实现方法并不推荐。

2. 第二种方法

设置（百分比 - em）

代码部分

    <style>
        body {
            background-color: #f1f1f1;
            /* 把盒子设置为IE盒子 */
            box-sizing: border-box;
        }
        .container {
            background-color: rgb(46, 101, 250);
            border-radius: 0.5em;
            text-align: center;
            color: #fff;
        }
        /* 将main转换为块元素 */
        .main {
            display: block;
            width: 70%;
        }
        .main ,.right{
            border: 1px solid #333;
            border-radius: 0.5em;
            background: #fff;
            float: left;
        /* 将main和right转换为IE盒子 */
            box-sizing: border-box;
        }
        /* 把右边的块元素撑开 */
        .right {
            padding: 1.5em;
        }
        /* 第二种设置列间距的方法 */
        /* 2. 用相对单位百分比和em组合来设置
            注意计算格式之间有空格，否则计算无效
        */
        .right {
            width: calc(30% - 1em);
            margin-left: 1em;
        }
    </style>

总结：

设置右边的块元素，左侧外边距为 1em，因为(right)的宽度包含了这个外边距，所以应当减去，运用函数计算。表达式为：calc（百分比 - em），即：calc（30% - 1em）
注意表达式里的空格，必须隔开，否则会导致运算无效。【切记！！！切记！！！切记！！！】

通过设置后发现，运用这种方法，无论怎么调整视窗的大小，这个列间距都是相对一致的，并不会随视窗改变而改变。所以，我们推荐使用这种方法来实现列间距的设置。

---

二、实现一个等高列的代码实例

思考:???

用表格实现等高列的设置

我们在前面学习了使用百分比来实现列间距的设置，虽然能实现左右两边块元素的间距，但是，一旦两个块元素里所包含的元素数量不等时，是无法实现块元素等高的。也不能通过写死数据，来设置高度。还有什么办法呢？

办法肯定是有的，我们知道表格的属性中，具有同行列高相等的特性，单元格内不管包含的元素有多少，这行表格两边元素的列高始终一致。为了验证想法，通过下面的代码案例，来实践一下。

代码部分：

    <style>
        body {
            background-color: #eee;
            color: #000;
        }
        .top > h2 {
            background-color: #fff;
        }
        .conter {
            display: table;
            width: 100%;
            border-spacing: 0.5em 0;
            text-align: center;
        }
        .main,.sider {
            display: table-cell;
            background-color: #fff;
            color: #000;
            border-radius: 0.5em;
        }
        .right-box {
            margin: 0;
            padding: 0;
        }
        .container {
            margin-left: -0.5em;
            margin-right: -0.5em;
        }
    </style>

总结：

使用表格来实现列的等高并不会真正使用表格,(在HTML里没有用到表格元素), 而只是是把CSS属性设置为表格元素的属性来显示。这个方法可能是一个比较简单的解决方案。不过,因为是用到了”表格”。所有需要特别小心浏览器兼容性问题。