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

微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > 实例演示列间隙的两种解决方案，外加一个等高列的案例

博主信息

博文 21

粉丝 0

访问量 27906

专题推荐

更多>

列间隙的两种解决

使用百分比方式解决，但是列间隙会随着视口的大小而动态变化。
使用百分比加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;
}