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

基于html+css的evenly布局

news 2026/2/9 17:58:51

准备项目

项目开发工具

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

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2026/1/9 12:53:59

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/31 8:25:07

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2026/1/29 2:30:31

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2026/1/31 8:16:58

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/31 9:18:40

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/2/5 4:33:51

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/9/26 10:15:18

JavaScript 标签加载

目录 JavaScript 标签加载script 标签的 async 和 defer 属性&#xff0c;分别代表什么&#xff0c;有什么区别1. 普通 script 标签2. async 属性3. defer 属性4. type"module"5. 各种加载方式的对比6. 使用建议 JavaScript 标签加载 script 标签的 async 和 defer …...

编程新知 2025/10/2 20:58:12