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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 列间隙的设置方法以及等高列的实现

博主信息

博文 6

粉丝 1

访问量 9708

专题推荐

更多>

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，这时候就实现了等高列了。