微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 列间隙的两种设置方案和等高列的解决案例
博主信息
博文 16
粉丝 0
评论 1
访问量 21125
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
列间隙的两种设置方案和等高列的解决案例
半生
原创
1297人浏览过

列间隙的两种设置方法和异同

  • 添加列间隙其实就是添加外边距（margin），当然可以左列加，也可以给右列加。

  • 添加列间距有两种方法：1.百分比，2.百分比 + em

  • 实例代码如下：
    ` <style>

    1.   /* 添加背景颜色 */
    2.   body {
    3.       background-color: lightgoldenrodyellow;
    4.   }
    5.   header {
    6.       color: lightgray;
    7.       background-color: green;
    8.       /* 设置圆角 */
    9.       border-radius: 0.5em;
    10.   }
    11.   /* 这里使用群组选择器，同时匹配多个元素 */
    12.   .main,
    13.   .sidebar {
    14.       background-color: ivory;
    15.       border-radius: 0.5em;
    16.       /* 这里使用浮动来实现 */
    17.       float: left;
    19.       /* 将w3c的盒子转为ie盒子：盒子大小包括了追加的padding，border */
    20.       box-sizing: border-box;
    21.   }
    22.   .sidebar {
    23.       /* 设置内边距 */
    24.       padding: 1.5em;
    25.   }
    27.   /* 设置左侧main：使用相对值 x ，不管页面如何变化，
    28.   它始终占据页面的宽度的 x  */
    29.   .main {
    30.       width: 70%;
    31.   }
    32.   /* sidebar占据右侧 ，同样给相对值*/
    33.   .sidebar {
    34.       /* 添加列间隙：其实就是添加margin（外边距），可以在左列加，也可以加在右列 */
    35.       /* 添加列间隙有两种方式：1.百分比。2.百分比 + em  */
    36.       /* 这里使用百分比 */
    37.       width: 29%;
    38.       margin-left: 1%;
    39.   }
    41.   /* 这里示例百分比 + em  */
    42.   /* 百分比 + em ：使用到函数【 calc（x + y）】,"+"操作数前面必须要有“空格” */
    43.   .sidebar {
    44.       width: calc(30% - 1em);
    45.       /* 保证间隙是固定的，（相对于当前字号） */
    46.       margin-left: 1em;
    47.   }

    </style>`

  • 效果图
  • 总结：
  • 1.添加列间距有两种方法：1.百分比，2.百分比 + em
  • 2.百分比 + em，包含一个函数[ calc(x + y)],” + “操作数前必须加“空格”
  • 3.百分比：添加的列间隙是随着盒子大小变化而变化，它一直占据页面的 “ % ”。
  • 4.百分比 + em：添加的列间隙是固定的，但它随着字号大小变化而变化。因为是ie盒子，所以它的宽度=box-sizing，间距= % - em。
  • 5.无论哪种方法它们的效果都是一样的。

等高列解决案例

  • 设置列的等高：1.首先我们将容器转为table（表格）类型，在表格中表格宽高默认为表格内容决定，不像块级元素充满父级元素的整个空间，所以我们必须自己自定义。
  • 2.在table（表格中不支持margin），所以设置表格列间距/单元格间隙用（border-spacing：0 0），表格中单元格间隙有左右两个，所以我们赋予两个值。
  • 3.将表格（table）中每一列都转为单元格就会默认等高，这时我们的等高列就实现了。
  • 4.这时因为单元格的特性：当我们给它设置单元格间隙后，表格两边都会缩进所设置单元格间隙的值，所以我们要在容器的外面在加一个容器，给该容器左右设置一个负的表格中单元格间隙的值来进行调整。

  • 实例代码如下：
    `<!DOCTYPE html>
    <html lang="">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>等高列的解决方案：表格</title>
    <style>

    1.   body {
    2.       background-color: lavender;
    3.   }
    5.   .box,
    6.   .box1 {
    7.       height: 10em;
    8.       background-color: rgb(141, 141, 243);
    9.       /* 设置圆角 */
    10.       border-radius: 0.5em;
    11.   }
    12.   .box {
    13.       width: 60%;
    14.   }
    15.  /* 将容器转为table（表格） */
    16.  .container {
    17.      display: table;
    18.      /* 表格宽高默认由内容决定，并不会像块元素那样充满
    19.      父级容器的全部空间 */
    20.      /* 设置宽度 */
    21.      width: 100%;
    22.      /* 表格中不支持margin：列间隙/单元格间隙 */
    23.      /* 表格设置列间距用：borde-spacing */
    24.      /* 表格列间距左右两边都有 */
    25.      border-spacing: 1.5em 0;
    26.  }
    28.  /* 将每一列转为单元格元素 */
    29.  .box,
    30.  .box1 {
    31.      /* 转为单元格后就默认等高了，于是等高就实现了 */
    32.      display: table-cell;
    33.  }
    35.  /* 给这个table类似的容器外面套一个壳，利用负的外边距进行跳整 */
    36.  .wrapper {
    37.      /* 左外边距 */
    38.      margin-left: -1.5em;
    39.      /* 右外边距 */
    40.      margin-right: -1.5em;
    41.  }

    </style>
    </head>
    <body>
    <div class="wrapper">

    1.   <div class="container">
    2.       <div class="box"></div>
    3.       <div class="box1"></div>
    4.   </div>

    </div>
    </body>
    </html>`

  • 效果图
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：列间隙,是没有flex,grid的蛮荒时代, 比较麻烦的
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录