完美解决 flex 实现一行三个，显示多行，左对齐

效果图

在这里插入图片描述

代码

<body><section class="content"><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div><div class="item">元素</div></section>
</body>
<style>.content {width: 100%;display: flex;flex-wrap: wrap;background-color: skyblue;}.item {flex: 0 0 calc((100% - 10px)/3);height: 120px;background-color: pink;/* 间隙为5px */margin: 0 5px 5px 0;}.item:nth-child(3n) {/* 去除第3n个的margin-right */margin-right: 0;}
</style>

方法二

.item {/* flex: 0 0 calc((100% - 10px)/3); */width: calc((100% - 10px) / 3);height: 120px;background-color: pink;/* 间隙为5px */margin: 0 5px 5px 0;
}

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Node.js操作MySQL8.0数据库无法连接

Node.js操作MySQL8.0数据库无法连接

Node.js操作MySQL8.0数据库无法连接 原创&#xff1a;丶无殇  2023-10-07 报错内容 使用node.js连接数据库MySQL 8时候&#xff0c;报错ER_NOT_SUPPORTED_AUTH_MODE&#xff0c;并且提示Client does not support authentication protocol requested by server; consider upg…
阅读更多...
【python】可视化-绘制带有边权重的无向图

【python】可视化-绘制带有边权重的无向图

文章目录 需求示例数据代码实现 需求 输入数据表(矩阵)&#xff0c;绘制无向图。 示例数据 **示例数据1&#xff1a;**3个特征之间的关系数据 (data1.txt) featuresfeature1feature2feature3feature110.60.8feature20.610.3feature30.80.31 **示例数据2&#xff1a;**4个特…
阅读更多...
2023年中国汽车座舱行业发展现状及趋势分析：高级人机交互（HMI）系统将逐步提升[图]

2023年中国汽车座舱行业发展现状及趋势分析：高级人机交互（HMI）系统将逐步提升[图]

2022年有22.3%的汽车用户认为座舱内车载娱乐功能成为影响使用体验的关键因素。当前智能电动汽车的用户画像与娱乐、游戏等应用的用户画像相似&#xff0c;均以年轻人作为目标用户。年轻化的用户将娱乐功能的使用习惯延伸至汽车座舱内&#xff0c;对于座舱功能的需求不再局限于导…
阅读更多...
C++ 33.学习C++的意义-狄泰软件学院

C++ 33.学习C++的意义-狄泰软件学院

一些历史 UNIX操作系统诞生之初是直接用汇编语言编写的随着UNIX系统的发展&#xff0c;汇编语言的开发效率成为瓶颈&#xff0c;所以需要一个新的语言替代汇编语言1971年通过对B语言改良&#xff0c;使其能直接产生机器代码&#xff0c;C语言诞生UNIX使用C语言重写&#xff0c…
阅读更多...
mysql双主互从通过KeepAlived虚拟IP实现高可用

mysql双主互从通过KeepAlived虚拟IP实现高可用

mysql双主互从通过KeepAlived虚拟IP实现高可用 在mysql 双主互从的基础上&#xff0c; 架构图&#xff1a; Keepalived有两个主要的功能&#xff1a; 提供虚拟IP&#xff0c;实现双机热备通过LVS&#xff0c;实现负载均衡 安装 # 安装 yum -y install keepalived # 卸载 …
阅读更多...
智能AI系统源码ChatGPT系统源码+详细搭建部署教程+AI绘画系统+已支持OpenAI GPT全模型+国内AI全模型

智能AI系统源码ChatGPT系统源码+详细搭建部署教程+AI绘画系统+已支持OpenAI GPT全模型+国内AI全模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Chat…
阅读更多...
层次架构、面向服务架构（四十四）

层次架构、面向服务架构（四十四）

层次架构设计 表现层、中间层、数据访问层、数据架构规划、物联网层次架构、层次式架构案例分析。 层次结构缺点就是效率问题&#xff0c;上一层调用下一层。 1、着重写中间层 组件设计&#xff1a;面向接口编程&#xff0c;分为接口和实现类。 实体设计&#xff1a;实体表…
阅读更多...
无需公网IP，教学系统如何实现远程一站式管理维护？

无需公网IP，教学系统如何实现远程一站式管理维护？

全国多所高校应用红亚科技研发的一套教学实验系统平台&#xff0c;此实验系统服务器分别部署在学校内部&#xff0c;与校内的各种教学资源整合在一起&#xff0c;向校内师生提供服务。 红亚总部设立在北京&#xff0c;虽说在全国22个省会均设有办事处&#xff0c;在面对全国多…
阅读更多...
【ESP32 + Edge Impulse平台】运行AI算法模拟多传感器数据融合实现异常检测

【ESP32 + Edge Impulse平台】运行AI算法模拟多传感器数据融合实现异常检测

本篇博文主要以ESP32+MQ Sensor 气体传感器为例，通过连接 Edge Impulse 平台，实现数据的实时采集和训练，进而实现在嵌入式设备上部署 ML 机器学习。本教程介绍如何使用 Edge Impulse 和机器学习来实现ESP32 异常检测系统，系统使用一个机器学习模型，检测气体何时出现异常。…
阅读更多...
JOSEF约瑟 闭锁继电器 LB-7 YDB-100 100V 50HZ 控制断路器的合闸或跳闸

JOSEF约瑟 闭锁继电器 LB-7 YDB-100 100V 50HZ 控制断路器的合闸或跳闸

闭锁继电器LB-7导轨安装名称:闭锁继电器型号:LB-7闭锁继电器额定电压100V功率消耗≤10VA触点容量220V1.5A40W返回系数≥0.8 LB-1A、LB-1D、DB-1、HBYB-102/D YDB-100、HLO、DB-100、LB-7型闭锁继电器 一、用途 LB-7型闭锁继电器(以下简称继电器)用于发电厂及变电所内高压母线…
阅读更多...
Vim教程

Vim教程

目录 vim 介绍 常用的四种模式 首先先学会如何正确进入和退出vim&#xff1a; normal模式 insert模式&#xff1a; command模式&#xff1a; v-block模式&#xff1a; vim异常退出 vim配置 vim 介绍 Vim是一款高度可定制的文本编辑器&#xff0c;它的前身是Vi&#xf…
阅读更多...
前端—— 分层模型和应用协议

前端—— 分层模型和应用协议

1 分层模型 MAC地址 可以认为计算机专属&#xff0c;可以认为每台计算机的 MAC地址 固定不变&#xff1b; IP地址 可以认为是计算机当前的【家庭地址】&#xff0c;动态唯一&#xff0c;家庭地址变化&#xff0c;IP地址 也跟着变化&#xff1b; 举个例子&#xff0c;A 给 B 发…
阅读更多...
踩坑日记 uniapp 底部 tabber遮挡住购物车结算

踩坑日记 uniapp 底部 tabber遮挡住购物车结算

tabbar 被购物车结算遮挡 在小程序上tabbar没有将固定栏遮挡&#xff0c;如果直接调高&#xff0c;浏览器H5页面是对了&#xff0c;但在小程序上面离底部的定位就太高了 原代码 // 底部结算样式.shop-foot {border-top: 2rpx solid #F7F7F7;background-color: #FFF;position: …
阅读更多...
通过IP地址如何计算相关地址

通过IP地址如何计算相关地址

以IP地址为1921681005 子网掩码是2552552550为例。算出网络地址、广播地址、地址范围、主机数。 分步骤计算 1&#xff09; 将IP地址和子网掩码换算为二进制&#xff0c;子网掩码连续全1的是网络地址&#xff0c;后面的是主机地址。 虚线前为网络地址&#xff0c;虚线后为主机…
阅读更多...
【Pod】

【Pod】

Pod 一、Pod基本概念二、Pod的使用方式pause容器&#xff08;pod的基础容器&#xff09;核心功能pause容器使得Pod中所有容器可以共享两种资源&#xff1a;网络和存储网络存储 三、Pod分类自主式Pod/静态pod控制器管理的Pod 四、三种容器五、镜像拉取策略&#xff08;image Pul…
阅读更多...
阿里面试：页面调10 个上游接口，如何做高并发？

阿里面试：页面调10 个上游接口，如何做高并发？

说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 一个页面要调100 个上游接口&#xff0c;如何优化&#xff1f; 一个场景…
阅读更多...
AI工程化—— 如何让AI在企业多快好省的落地？

AI工程化—— 如何让AI在企业多快好省的落地？

作为计算机科学的一个重要领域&#xff0c;机器学习也是目前人工智能领域非常活跃的分支之一。机器学习通过分析海量数据、总结规律&#xff0c;帮助人们解决众多实际问题。随着机器学习技术的发展&#xff0c;越来越多的企业将机器学习技术作为核心竞争力&#xff0c;并运用在…
阅读更多...
python读取vivo手机截图，将满屏图片文件移动别的路径

python读取vivo手机截图，将满屏图片文件移动别的路径

问题之初 python读取vivo手机截图&#xff0c; 将满屏图片文件移动别的路径好多这样的图片&#xff0c;占用手机大量的内存&#xff0c;食之无味弃之可惜&#xff01;那么会复制粘贴&#x1f440;代码的我们我们今天就把这些图片筛选清理掉。 这段代码 原有逻辑的基础上&…
阅读更多...
智能井盖传感器：城市安全卫士

智能井盖传感器：城市安全卫士

随着城市人口的不断增加和城市基础设施的不断发展&#xff0c;井盖作为城市道路和排水系统的重要组成部分&#xff0c;承担着确保城市安全和便利性的关键角色。然而&#xff0c;井盖在日常使用中常常面临倾斜、水浸和翻转等问题&#xff0c;这些问题可能导致交通阻塞、行人坠井…
阅读更多...
边坡安全监测系统的功能优势

边坡安全监测系统的功能优势

随着科技的进步&#xff0c;边坡安全监测系统在各种工程项目中发挥着越来越重要的作用。这款系统通过实时监测垂直、水平位移数据&#xff0c;以折线图的方式显示在监控平台中&#xff0c;为工程人员提供了直观、便捷的监控工具&#xff0c;从而能够及时掌握边坡稳定状况&#…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023