flex实现间距相等的table布局

news2024/9/22 13:31:18

 

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 800px;
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      border: 1px solid #ddd;
      margin: 20px;
    }
    
    .cell {
      width: calc(50% - 10px); /* 每列占据一半宽度,减去间隙的宽度 */
      background-color: #f1f1f1;
      padding: 10px;
      box-sizing: border-box;
    }

    body, html {
      height: 100%;
      margin: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="cell">单元格1</div>
    <div class="cell">单元格2</div>
    <div class="cell">单元格3</div>
    <div class="cell">单元格4</div>
    <div class="cell">单元格5</div>
    <div class="cell">单元格6</div>
  </div>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1353903.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

把Canvas捡起来吧!

canvas介绍 canvas是HTML5新增的一种新特性&#xff0c;一种使用JavaScript绘制图形的HTML元素。 基本使用 <canvas id"example" width"300" height"300" />使用 矩形&#xff1a; var canvas document.getElementById("examp…

快速搭建知识付费小程序,3分钟即可开启知识变现之旅

产品服务 线上线下课程传播 线上线下活动管理 项目撮合交易 找商机找合作 一对一线下交流 企业文化宣传 企业产品销售 更多服务 实时行业资讯 动态学习交流 分销代理推广 独立知识店铺 覆盖全行业 个人IP打造 独立小程序 私域运营解决方案 公域引流 营销转化 …

源支付V7最新修复版,V2.7.9最新版

源支付V7最新修复版&#xff0c;V2.7.9最新版 注&#xff1a;开发不易&#xff0c;仅限交流学习使用&#xff0c;如商业使用&#xff0c;请支持正版&#xff01; 轻量化的界面 UI, 提供更加便捷的操作体验&#xff0c;让您的系统一目了然 推荐支付宝当面付 - 免 CK - 商家版&a…

JavaScript密码加密解密(纯代码-可直接拉取使用)

抽成组件rsaEncrypt.js import JSEncrypt from jsencrypt/bin/jsencrypt// 密钥对生成 http://web.chacuo.net/netrsakeypairconst publicKey MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBANL378k3RiZHWx5AfJqdH9xRNBmD9wGD\n 2iRe41HdTNF8RUhNnHit5NpMNtGL0NPTSSpPjjI1kJfVorRvaQerUgk…

【NeRF数据集】LLFF格式数据集处理colmap结果记录

【NeRF数据集】LLFF格式数据集处理colmap结果记录 1. 基于colmap的配置与运行&#xff0c;获取图像及其对应的相机位姿&#xff1b;2. 使用 LLFF格式数据集制作&#xff0c;将匹配的位姿转化为LLFF格式&#xff1b;3. 上传所需文件和设置配置文件&#xff0c;将所需文件上传至N…

numpy数组05-numpy的索引和切片

numpy中可以对其中的某一行&#xff08;列&#xff09;进行数据处理。 上节课我们已经取出了CSV文件中的二维数组&#xff0c;本次对这个二维数组为例&#xff0c;进行练习操作。 示例代码如下&#xff1a; import numpy as npus_file_path "US_video_data_numbers.cs…

5大自动化测试的Python框架,看完就能涨薪5k 【实用干货】

目前&#xff0c;它在Tiobe指数中排名第三个&#xff0c;仅次于Java和C。随着该编程语言的广泛使用&#xff0c;基于Python的自动化测试框架也应运而生&#xff0c;且不断发展与丰富。 因此&#xff0c;开发与测试人员在为手头的项目选择测试框架时&#xff0c;需要考虑许多方…

FX3U-1PG使用

作为扩展模块的安装 伺服驱动器的参数设置 1.设置为0&#xff0c;为位置模式&#xff0c;发送脉冲控制&#xff1b; 2. 设置旋转方向&#xff0c;以及脉冲方式&#xff0c;通常设置为01&#xff0c;因为FX3U-1PG只支持正方向脉冲负方向脉冲方式&#xff1b; 当然想改变电机运…

显化的跨渠道整合:迅腾文化助力企业拓展销售渠道

显化的跨渠道整合&#xff1a;迅腾文化助力企业拓展销售渠道 在数字化浪潮的推动下&#xff0c;企业的销售渠道日趋多元化。面对复杂多变的市场环境&#xff0c;企业需要一种有效的方式来整合各个销售渠道&#xff0c;以实现更高效的销售拓展。广州迅腾文化传播有限公司的显化…

MySQL中的六种日志你都懂么?不懂!那就必须看看

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Linux 进程(七) 进程地址空间

虚拟地址/线性地址 学习c语言的时候我们经常会用到 “&” 符号&#xff0c;以及下面这张表&#xff0c;那么取出来的地址是否对应的是真实的物理地址呢&#xff1f;下面我们来写代码一步一步的验证。 从上面这张图不难看出&#xff0c;从正文代码&#xff0c;到命令行参数环…

当你明白了这句话,你就开始赚到钱了

哈喽&#xff0c;大家好啊&#xff0c;我是雷工&#xff01; 曾经看到稻盛和夫说过这么一句话&#xff1a; 其实钱并不是赚来的&#xff0c;而是你帮助别人解决问题后给你的回报。 这天发生了件小事&#xff0c;让我对这句话有了更深的认识。 一、 缘起 自从开始记笔记&…

洗地机有没有必要买?家用洗地机推荐

随着生活水平的提高&#xff0c;人们对家居环境的卫生和清洁要求也相应提高&#xff0c;因此家用洗地机作为一种现代化的清洁工具逐渐受到了广泛关注和青睐。那么&#xff0c;洗地机到底有没有必要买? 洗地机对于一些家庭确实是非常有必要的&#xff0c;特别是对于工作繁忙、…

springboot整合webservice使用总结

因为做的项目中用到了webservice,所以在此总结一下。 一、webservice简介 Web Service也叫XML Web Service, WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求&#xff0c;轻量级的独立的通讯技术。是通过SOAP在Web上提供的软件服务&#xff0c;使…

YOLOv7独家原创改进:提出一种新的Shape IoU,更加关注边界框本身的形状和尺度,对小目标检测也很友好 | 2023.12.29收录

💡💡💡本文改进:一种新的Shape IoU方法,该方法可以通过关注边界框本身的形状和尺度来计算损失,解决边界盒的形状和规模等固有属性对边界盒回归的影响。 💡💡💡对小目标检测涨点明显,在VisDrone2019、PASCAL VOC均有涨点 收录YOLOv7原创自研 https://blog.csdn…

【损失函数】Quantile Loss 分位数损失

1、介绍 Quantile Loss&#xff08;分位数损失&#xff09;是用于回归问题的一种损失函数&#xff0c;它允许我们对不同分位数的预测误差赋予不同的权重。这对于处理不同置信水平的预测非常有用&#xff0c;例如在风险管理等领域。 当我们需要对区间预测而不单是点预测时 分位…

由于找不到kernel32.dll无法继续执行此代码的解决方法

使用Windows 7操作系统&#xff0c;我一直被一个名为“kernel32.dll”的问题所困扰。kernel32.dll是Windows操作系统中非常重要的一个动态链接库文件&#xff0c;它包含了许多基本的系统函数&#xff0c;如内存管理、文件操作等。因此&#xff0c;当这个文件丢失或损坏时&#…

GPT科研助手!论文助手!编程助手!AIGC/机器学习/深度学习/卷积神经网络/地球科学/AI绘图等模块

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

【双指针算法】-- 左右指针

左右指针 前言一、双指针算法二、左右指针1.用于在已排序数组中找到两个数使其和为特定值2.在字符串中判断是否为回文 总结 前言 今天在刷Leetcode的时候觉得自己双指针掌握的还是不错的记录一下,写个学习笔记,也方便以后翻阅,如果也帮助到你了,那真是太好啦! 本篇介绍的是左右…

[DevOps-05] Jenkins实现CI/CD操作

一、简要说明 基于Jenkins拉取GitLab的SpringBoot代码进行构建发布到测试环境实现持续集成 基于Jenkins拉取GitLab指定发行版本的SpringBoot代码进行构建发布到生产环境实现CD实现持续部署 二、准备Springboot工程 1、IDEA新建工程 2、填写项目工程信息 3、选择Springboot版本…