列间隙的设置方法以及等高列的实现

1、列间隙的设置方法

用两种方法实现列间隙，并比较异同，下面上案例：

  <style>
      * {
        margin: 0;
        padding: 0;
      }
      :root {
        font-size: 1.25em;
      }
      header h2 {
        background-color: lightcoral;
        height: 3em;
        color: #fff;
        text-align: center;
      }
      .left,
      .main,
      .right {
        color: #fff;
        float: left;
        box-sizing: border-box;
      }
      /* 利用函数+em实现列间距 */
      .left {
        height: 30em;
        background-color: lightskyblue;
        width: calc(25% - 1em);
        margin-right: 1em;
      }
      .main {
        height: 30em;
        background-color: rgb(240, 194, 42);
        width: 50%;
      }
       /* 利用%实现列间距 */
      .right {
        height: 30em;
        background-color: lightskyblue;
        width: 24%;
        margin-left: 1%;
      }
    </style>
  </head>
  <body>
    <header>
      <h2>小案例实现的列间隙</h2>
    </header>
    <div class="left">左侧</div>
    <div class="main">主体</div>
    <div class="right">右侧</div>
  </body>

总结：

1、两种实现方法：1.使用百分比 2.使用百分比 + em，保证了间隙是固定的(相对于当前字号)
2、由于w3c盒子不包括padding border所以要通过box-sizing: border-box;把w3c盒子转为IE盒子。
3、添加列间距, 其实就是添加margin,可给左列加, 也能加到右列
4、使用函数calc( x + y)时, “+”操作数前面必须要有”空格”

2、等高列的实现

如何实现等高列？下面使用一个简单的小案例来演示一下：

  <style>
      :root {
        font-size: 1.25em; /*字号为 20px*/
      }
      *,
      ::before,
      ::after {
        margin: 0px; /*清除外边距*/
        padding: 0px; /*清除内边距*/
        box-sizing: border-box;
      }
      body {
        background-color: #ccc;
      }
      header h1 {
        background-color: cadetblue;
        color: #fff;
        text-align: center;
      }
      .left,
      .right {
        background-color: #fff;
        border-radius: 0.5em;
        border-top: 1px solid;
        display: table-cell;
        padding: 1em;
      }
      .left {
        text-align: center;
      }
      .right {
        width: 90%;
      }
      .content {
        display: table;
        width: 100%;
        border-spacing: 1.5em;
      }
      .left ul li {
        list-style: none;
      }
      .right h2 {
        text-align: center;
        padding-bottom: 1em;
      }
      .right p {
        text-indent: 2em;
      }
      .bianju {
        margin-left: -1.5em;
        margin-right: -1.5em;
      }
    </style>
  </head>
  <body>
    <!--头部-->
    <header><h1>新闻快讯</h1></header>
    <!--内容-->
    <div class="bianju">
      <div class="content">
        <div class="left">
          <ul>
            <li>国内新闻</li>
            <li>国外新闻</li>
            <li>娱乐新闻</li>
            <li>经济新闻</li>
            <li>社会新闻</li>
          </ul>
        </div>
        <div class="right">
          <h2>美国大选最关键时刻 情况又变了</h2>
          <p>
            美国大选迎来最关键时刻，情况正变得异常复杂。截至美东时间6日晚8时，尚有内华达州（6票）、宾夕法尼亚州（20票）、佐治亚州（16票）、北卡罗来纳州（15票）和阿拉斯加州（3票）未公布最终结果。
            美东时间6日凌晨，拜登在佐治亚州实现逆转，几个小时后，又在宾夕法尼亚州反超特朗普，看似大局已定，但随即又出现了新的波折。
            然而，特朗普、拜登谁能最终拿下通往白宫的三个州，也各有新情况——选情胶着的内华达州，点票官自称受到人身威胁，计票工作进展迟滞；而佐治亚州、宾夕法尼亚州也已宣布重新计票。
          </p>
        </div>
      </div>
    </div>

首先，我们要使用display: table;将content这个盒子转为表格，利用border-spacing: 1.5em;来设置表格间的宽度，然后使用display:table-cell将left和right转换为单元格元素，这个时候，貌似实现了等高列的效果，但是仔细一看，左右两边因为是表格的关机，还是有间隙的，非常影响布局，这个时候我们要在content的外层再套一个盒子，设置margin-left: -1.5em;``margin-right: -1.5em;让左右各减1.5em，这时候就实现了等高列了。

1、列间隙的设置方法

总结：

2、等高列的实现

相关文章