当前位置： 首页 > news >正文

基于html+css的evenly布局

news 2026/3/27 15:19:58

准备项目

项目开发工具

Visual Studio Code 1.44.2
版本: 1.44.2
提交: ff915844119ce9485abfe8aa9076ec76b5300ddd
日期: 2020-04-16T16:36:23.138Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.19044

项目结构

在这里插入图片描述

index.html代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片flex布局</title><style>* {margin: 0;padding: 0;}.box {display: flex;height: 200px;border: 1px solid #000;justify-content: space-evenly;}.box div {width: 100px;height: 100px;}img {width: 100%;}</style>
</head>
<body><div class="box"><div><img src="./images/1.jpg" alt=""></div><div><img src="./images/1.jpg" alt=""></div><div><img src="./images/1.jpg" alt=""></div></div>
</body>
</html>

总结

此代码可以实现图片的水平居中分散对齐并且图片间距一致的展示效果，能够让图片展示更加美观。

相关文章：

基于html+css的evenly布局

准备项目 项目开发工具 Visual Studio Code 1.44.2 版本: 1.44.2 提交: ff915844119ce9485abfe8aa9076ec76b5300ddd 日期: 2020-04-16T16:36:23.138Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Windows_NT x64 10.0.19044 项目…...

编程日记 2023/5/13 13:10:40

【从零开始学习 UVM】10.5、UVM TLM —— UVM TLM Blocking Get Port

文章目录 UVM TLM Get Port Example1. 创建一个发送方类，其端口类型为 uvm_blocking_get_imp3. 创建接收器类，等待 get 方法。4. 在更高层次上连接端口及其实现Get端口阻塞行为任何组件都可以通过 TLM get 端口请求从另一个组件接收事务。发送组件应定义获取端口的实现。该实…...

编程日记 2023/5/14 7:08:22

English Learning - L2 第 10 次小组纠音 辅音 [m] [n] [ŋ] 半元音 [w] [j] 2023.3.29 周三

English Learning - L2 第 10 次小组纠音 辅音 [m] [n] [ŋ] [w] [j] 2023.3.29 周三共性问题more Autumn [ɔː] 舌位偏前gone evening 前后鼻音不分Hes proud of this name 双元音缺乏滑动感bank thing 中的后鼻音发成前鼻音week what yolk 元音 [iː] [ɒ] 舌位偏前 [əʊ] …...

编程日记 2023/5/13 21:44:46

从零开始实现一个C++高性能服务器框架----环境变量模块

此项目是根据sylar框架实现&#xff0c;是从零开始重写sylar&#xff0c;也是对sylar丰富与完善 项目地址&#xff1a;https://gitee.com/lzhiqiang1999/server-framework 简介 项目介绍&#xff1a;实现了一个基于协程的服务器框架&#xff0c;支持多线程、多协程协同调度&am…...

编程日记 2023/5/27 6:11:39

git常用命令的解释

解释git add . git add . 命令用于将当前目录下的所有文件添加到 Git 仓库的暂存区中。这个命令通常用于刚刚打开一个 Git 仓库时&#xff0c;或者用于将本地文件更新到远程仓库时。 具体来说&#xff0c;git add . 命令会将当前目录下的所有文件添加到 Git 仓库的暂存区中&am…...

编程日记 2023/5/24 21:19:59

DNS和CDN的区别与联系

现在互联网用户很多不能理解CDN和DNS之间的关系&#xff0c;他们之间到底有什么区别。对于这两者永远处于模糊的概念。其实二者是相辅相成的&#xff0c;二者搭配起来能使网站更加安全&#xff0c;快速。 用户访问未使用CDN缓存网站的过程为: 1、用户向浏览器提供要访问的域名…...

编程日记 2023/5/22 13:20:50

Java基础知识 | 常见面试题（中）：面向对象基础

撰写成一问一答的形式&#xff0c;每次回答都默写&#xff0c;对比参考答案后&#xff0c;再默写出更恰当的答案。 相关内容 Java基础知识 | 常见面试题&#xff08;上&#xff09;&#xff1a;基础概念和常识 Java基础知识 | 常见面试题&#xff08;上&#xff09;&#xff1a…...

编程日记 2023/5/16 15:52:20

勒索软件正在从 Windows 转向 Linux

听说勒索软件正在从 Windows 转向 Linux了勒索软件正在从 Windows 转向 Linux 最近几周&#xff0c;黑客们一直在对 Linux 企业网络部署 IceFire 勒索软件&#xff0c;这是一个值得注意的转变&#xff0c;因为它曾经是一个只针对 Windows 的恶意软件。与 Windows 相比&#xf…...

编程日记 2023/5/16 5:58:20

信息系统项目管理师 第11章 项目成本管理

1.管理基础 1.重要性和意义 项目管理主要受范围、时间、成本、质量的约束,项目成本管理就是要确保在批准的预算内完成项目。 如果项目建设的实际成本远远超出批准的投资预算,就很容易造成成本失控。 1.对工程项目认识不足。 2.组织制度不健全。 3.方法问题 4.技术的制约 5.需…...

编程日记 2023/5/25 6:14:21

XML 简介

文章目录一、XML 简介二、XML 用途总结一、XML 简介 XML 被设计用来传输和存储数据。 HTML 被设计用来显示数据。 XML 指可扩展标记语言&#xff08;eXtensible Markup Language&#xff09;。 可扩展标记语言&#xff08;英语&#xff1a;Extensible Markup Language&#xf…...

编程日记 2023/5/22 13:22:49

ERP：华为杀入，金蝶们打颤？

配图来自Canva可画 近期&#xff0c;华为官方透露将在4月份推出自研MetaERP管理系统&#xff0c;引来不少媒体和业内人士的围观&#xff0c;紧接着关于华为“进军ERP市场”的解读更是不胫而走&#xff0c;所谓一石激起千层浪&#xff0c;此说法一出&#xff0c;直接导致了金蝶…...

编程日记 2023/5/22 13:26:25

Linux——总复习1

1.要注意自己处于当前那个目录位置。 2.将file1的前五行/后三行重定向、附加到file2【输出重定向】 head -5 file1 > file2 tail -3 file1 >> file2 3.ls与cat区别 ls:列出目录的目录内容&#xff0c;未指定目录&#xff0c;则列出当前工作目录的内容 -l:查…...

编程日记 2023/5/25 15:54:07

控制SQL*PLUS的环境和数据字典简介

可以通过使用SET命令来设置SQL*PLUS的环境变量&#xff0c;从而达到控制SQL*PLUS 环境的目的。 SET命令的格式如下&#xff1a; SET 环境变量 变量的值 可以通过使用SHOW命令来显示SQL*PLUS环境变量的配置。SHOW 命令的格式如下&#xff1a; SHOW 环境变量|ALL 下面用一个…...

编程日记 2023/5/28 0:52:43

Chapter11.3：MATLAB_SIMULINK在离散系统中的应用

该系列博客主要讲述Matlab软件在自动控制方面的应用&#xff0c;如无自动控制理论基础&#xff0c;请先学习自动控制系列博文&#xff0c;该系列博客不再详细讲解自动控制理论知识。 自动控制理论基础相关链接&#xff1a;https://blog.csdn.net/qq_39032096/category_10287468…...

编程日记 2023/5/30 8:49:58

过滤器Filter

什么是Filter&#xff1f; Filter表示过滤器&#xff0c;是JavaWeb三大组件&#xff08;Servlet、FIlter、Listener&#xff09;之一。过滤器可以把对资源的请求拦截下来&#xff0c;总而实现一些特殊的功能 使用过滤器后&#xff0c;要想访问web服务器上的资源&#xff0c;必须…...

编程日记 2023/5/28 19:06:36

MySQL数据同步ES的常用思路和方法

文章目录 1.同步双写2.异步双写3.定时任务4.数据订阅大家应该都在各种电商网站检索过商品，检索商品一般都是通过什么实现呢？搜索引擎Elasticsearch。 那么问题来了，商品上架，数据一般写入到MySQL的数据库中，那么用于检索的数据又是怎么同步到Elasticsearch的呢？ 1.同步双…...

编程日记 2023/5/28 19:08:38

spring源码之扫描前设置

扫描前设置 &#x1f6f9;源码源码说明总结启动一个springboot项目源码 org.springframework.context.annotation.ComponentScanAnnotationParser#parse public Set<BeanDefinitionHolder> parse(AnnotationAttributes componentScan, String declaringClass) {// 创建C…...

编程日记 2023/5/24 1:52:30

C++ 98/03 应该学习哪些知识19

迭代器、空间配置器理解 在 C 中&#xff0c;迭代器是一种可以用来遍历容器中的元素的对象。它们提供了一个类似于指针的接口&#xff0c;允许我们访问容器中的元素&#xff0c;而不必了解容器内部的结构。迭代器是 STL&#xff08;标准模板库&#xff09;的核心部分&#xff0…...

编程日记 2023/5/28 19:09:35

java毕业生就业信息管理系统servlet程序

1&#xff0e;系统登录&#xff1a;系统登录是用户访问系统的路口&#xff0c;设计了系统登录界面&#xff0c;包括用户名、密码和验证码&#xff0c;然后对登录进来的用户判断身份信息&#xff0c;判断是管理员用户还是普通用户。 2&#xff0e;系统用户管理&#xff1a;不管是…...

编程日记 2023/5/6 22:44:01

linux命令-netstat

linux命令-netstat 查看Linux中网络系统状态信息 补充说明 netstat命令 用来打印Linux中网络系统的状态信息&#xff0c;可让你得知整个Linux系统的网络情况。 语法 netstat(选项)选项 -a或--all&#xff1a;显示所有连线中的Socket&#xff1b; -A<网络类型>或--&…...

编程日记 2023/5/15 4:26:06

旧手机秒变4K摄像头：Iriun Webcam保姆级配置指南（附USB连接技巧）

旧手机秒变4K摄像头&#xff1a;Iriun Webcam保姆级配置指南&#xff08;附USB连接技巧&#xff09; 你是否曾为台式机缺少高清摄像头而烦恼&#xff1f;又或者手头闲置的安卓手机不知如何利用&#xff1f;将旧手机改造成专业级4K摄像头&#xff0c;不仅成本低廉&#xff0c;还…...

编程新知 2026/3/27 14:56:49

优化问题求解器选型指南：何时该用高斯伪谱法，而不是直接法或打靶法？

优化问题求解器选型指南&#xff1a;高斯伪谱法在动态系统控制中的战略定位 当面对化工反应器温度控制或航天器轨道转移这类复杂动态系统优化问题时&#xff0c;工程师们常陷入算法选择的困境。就像外科医生需要根据病灶位置选择手术刀或激光治疗一样&#xff0c;最优控制问题的…...

编程新知 2026/3/27 14:40:41

保姆级教程：手把手教你将若依(RuoYi)项目从Java 8迁移到Java 17（含Spring Boot 3升级）

保姆级教程&#xff1a;手把手教你将若依(RuoYi)项目从Java 8迁移到Java 17&#xff08;含Spring Boot 3升级&#xff09; 最近几年Java生态发生了翻天覆地的变化&#xff0c;从Java 8到Java 17不仅仅是版本号的跳跃&#xff0c;更是一次技术栈的全面革新。作为国内广泛使用的…...

编程新知 2026/3/27 13:37:11

Deepfake Offensive Toolkit实战：视频会议系统渗透测试案例

Deepfake Offensive Toolkit实战&#xff1a;视频会议系统渗透测试案例 【免费下载链接】dot The Deepfake Offensive Toolkit 项目地址: https://gitcode.com/gh_mirrors/dot/dot 想要了解如何利用深度伪造技术进行视频会议系统安全测试吗&#xff1f;Deepfake Offensi…...

编程新知 2026/3/27 13:37:11

轻量级二维码工具性能优化：从加载到部署的全流程实践

轻量级二维码工具性能优化&#xff1a;从加载到部署的全流程实践 【免费下载链接】qrcodejs Cross-browser QRCode generator for javascript 项目地址: https://gitcode.com/gh_mirrors/qr/qrcodejs 二维码生成功能已成为现代Web应用的常见需求&#xff0c;但传统实现方…...

编程新知 2026/3/27 11:56:19

EPLAN默认工具栏隐藏功能大揭秘：从复制格式到表格式编辑的实战技巧

EPLAN默认工具栏隐藏功能大揭秘&#xff1a;从复制格式到表格式编辑的实战技巧 在电气设计领域&#xff0c;EPLAN作为行业标杆软件&#xff0c;其默认工具栏中隐藏着许多未被充分发掘的效率利器。这些功能往往被常规操作所掩盖&#xff0c;却能在复杂项目设计中节省大量时间。…...

编程新知 2026/3/27 11:54:16

SpringBoot 3.2.0 项目里整合 Flowable 7.1.0，我踩过的那些坑和最佳实践

SpringBoot 3.2.0 项目里整合 Flowable 7.1.0&#xff0c;我踩过的那些坑和最佳实践 最近在重构公司内部的工作流系统时&#xff0c;我决定采用 SpringBoot 3.2.0 和 Flowable 7.1.0 的组合。本以为只是简单的依赖引入和配置&#xff0c;没想到从 POM 文件开始就踩了不少坑。这…...

编程新知 2026/3/27 11:48:09

RS485接口EMC设计与防护电路实现

RS485接口电路的EMC设计与工程实现1. 项目概述1.1 RS485接口的EMC挑战RS485作为工业通信标准接口&#xff0c;其典型应用场景中信号走线常与电源线、功率信号线混合布线&#xff0c;导致以下EMC问题&#xff1a;共模干扰通过长距离传输线耦合浪涌脉冲对接口电路的冲击损坏高频噪…...

编程新知 2026/3/27 10:39:48

实战教学应用：基于快马平台开发生物繁殖课互动学习与测评系统

作为一名生物老师&#xff0c;我一直在寻找能够让学生更直观理解繁殖知识的教学工具。最近尝试用InsCode(快马)平台开发了一个互动学习系统&#xff0c;效果出乎意料的好。这个平台最棒的地方是&#xff0c;不需要复杂的服务器配置&#xff0c;就能把想法快速变成可实际使用的教…...

编程新知 2026/3/27 9:37:05

5个高效实用的英雄联盟工具集使用指南

5个高效实用的英雄联盟工具集使用指南 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是一款基于LCU API开发的开源…...

编程新知 2026/3/27 9:31:04