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

基于html+css的自适应展示1

news 2026/3/28 21:49:34

准备项目

项目开发工具

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

项目结构

在这里插入图片描述
0d3454bcabab558caf65c72f7.png)

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>自适应换行</title><style>* {margin: 0;padding: 0;}.box {display: flex;flex-wrap: wrap;height: 200px;width: 300px;border: 1px solid #000;justify-content: space-between;}.box div {width: 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><img src="./images/1.jpg" alt=""></div></div>
</body></html>

总结

此代码可以实现图片的自适应展示，自适应换行展示效果，能够让让图片更加灵活的布局。

相关文章：

基于html+css的自适应展示1

准备项目 项目开发工具 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/29 22:31:50

DolphinDB +Python Airflow 高效实现数据清洗

DolphinDB 作为一款高性能时序数据库&#xff0c;其在实际生产环境中常有数据的清洗、装换以及加载等需求&#xff0c;而对于该如何结构化管理好 ETL 作业&#xff0c;Airflow 提供了一种很好的思路。本篇教程为生产环境中 ETL 实践需求提供了一个解决方案&#xff0c;将 Pytho…...

编程日记 2023/4/14 9:08:12

pip3 升级软件包时遇到超时错误解决方法

如果你在使用 pip3 升级软件包时遇到超时错误&#xff0c;可能是因为下载速度缓慢或网络不稳定。以下是解决方法&#xff1a; 更改 pip3 源&#xff1a;你可以切换到其他 pip3 源&#xff0c;例如清华、阿里等等&#xff0c;以提高下载速度。 pip3 install -i https://pypi.tun…...

编程日记 2023/5/29 22:33:41

Linux环境开机自启动

1.制作服务 在/etc/systemd/system/路径下创建kkFile.service文件 cd /etc/systemd/system/ vim kkFile.service2.写入如下内容 [Unit] DescriptionkkFile service [Service] Typeforking ExecStart/sinosoft/yjya/kkFileView-4.0.0/bin/startup.sh [Install] WantedBymulti…...

编程日记 2023/5/29 22:33:49

字节8年测试经验，送给想要学习自动化测试的同学6条建议

我的职业生涯开始和大多数测试人一样&#xff0c;开始接触都是纯功能界面测试。那时候在一家电商公司做测试&#xff0c;做了有一段时间&#xff0c;熟悉产品的业务流程以及熟练测试工作流程规范之后&#xff0c;效率提高了&#xff0c;工作比较轻松&#xff0c;也得到了更好的…...

编程日记 2023/4/14 8:53:08

快速搭建springboot websocket客户端

一、前言WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。HTML5 定义的 WebSocket 协议&#xff0c;能更好的节省服务器资源和带宽&#xff0c;并且能够更实时地进行通讯。HTML5 定义的 WebSocket 协议&#xff0c;能更好的节省服务器资源和带宽&…...

编程日记 2023/5/31 12:16:45

Python 操作 MongoDB 详解

嗨害大家好鸭&#xff01;我是芝士❤ 一、前言 MongoDB属于 NoSQL&#xff08;非关系型数据库&#xff09;&#xff0c; 是一个基于分布式文件存储的开源数据库系统。 二、操作 MongoDB 1. 安装 pymongo python 使用第三方库来连接操作 MongoDB&#xff0c; 所以我们首先安…...

编程日记 2023/4/14 8:43:05

虹科案例 | 丝芙兰xDomo：全球美妆巨头商业智能新玩法

全球美妆行业的佼佼者丝芙兰&#xff0c;其走向成功绝非仅依靠品牌知名度和营销手段。身为数据驱动型企业&#xff0c;2018年以来&#xff0c;丝芙兰就率先在行业内采用虹科提供的Domo商业智能进行数据分析和决策&#xff0c;并首先享受了运营优化、效率提升所带来的商业价值。…...

编程日记 2023/4/14 8:38:04

10种优雅的MyBatis写法，同事用了都说好

用来循环容器的标签forEach,查看例子 foreach元素的属性主要有item&#xff0c;index&#xff0c;collection&#xff0c;open&#xff0c;separator&#xff0c;close。 item&#xff1a;集合中元素迭代时的别名&#xff0c; index&#xff1a;集合中元素迭代时的索引 open…...

编程日记 2023/4/14 8:33:03

SQL删除记录方式汇总

大家好&#xff0c;我是RecordLiu! 今天给大家分享的是SQL中删除记录的不同方式&#xff0c;我会用几道真题来给大家讲解。 题目直达链接&#xff1a; 牛客网在线SQL编程练习 切换到SQL篇就能看到了。 我这里先列下知识点&#xff1a; SQL中进行简单删除的语法是什么?SQL…...

编程日记 2023/4/14 8:28:02

用in函数嵌入子查询作为条件时查出结果为空

用in函数嵌入子查询作为条件时查出结果为空 问题&#xff1a; SELECT * FROM SGGCDB_VIEW sv WHERE RES_ID IN (SELECT urrv.RES_ID FROM IBPS_ERP.USER_ROLE_RES_VIEW urrv WHERE urrv.ID_ 1069978138403930112 )结果未空值。 原因&#xff1a; 首先&#xff0c;SELECT u…...

编程日记 2023/4/14 8:23:00

电商行业如何利用飞项解决跨部门协作难题

在电商行业中&#xff0c;跨部门合作是最常见的事。从产品方案到设计方案&#xff0c;从市场定价到销售策略&#xff0c;从采购需求到成本清单……在电商新品研发到正式售卖的过程中&#xff0c;存在着大量跨部门协作与逆向流程&#xff0c;但任务零碎、沟通难、进度难同步、文…...

编程日记 2023/4/14 8:17:58

全网最详细，Jmeter性能测试-性能基础详解，参数化函数取值（二）

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 参数化详解 Jmeter中…...

编程日记 2023/5/31 12:17:29

选择排序的简单理解

详细描述 选择排序的工作原理是&#xff1a;首先在未排序序列中找到最小&#xff08;大&#xff09;元素&#xff0c;存放到排序序列的起始位置&#xff0c;然后再从剩余未排序元素中继续寻找最小&#xff08;大&#xff09;元素&#xff0c;然后放到已排序序列的末尾&#xf…...

编程日记 2023/4/14 8:07:55

使用js封装一个循环链表

直接不说废话&#xff0c;直接上代码&#xff0c;这里继承了单向链表的类LinkList &#xff0c;可以查看之前的文章&#xff0c;点这里 class Node {constructor(element) {this.element element;this.next null;} }class CirularLinkedList extends LinkList {constructor(…...

编程日记 2023/4/14 8:02:54

NumPy 秘籍中文第二版：二、高级索引和数组概念

原文&#xff1a;NumPy Cookbook - Second Edition 协议&#xff1a;CC BY-NC-SA 4.0 译者&#xff1a;飞龙 在本章中&#xff0c;我们将介绍以下秘籍&#xff1a; 安装 SciPy安装 PIL调整图像大小比较视图和副本翻转 Lena花式索引位置列表索引布尔值索引数独的步幅技巧广播数…...

编程日记 2023/5/29 22:35:18

新品-图灵超频工作站GT430M介绍

曾经历史 UltraLAB GTxxxM系列是西安坤隆公司专注于超频高速计算应用的图形工作站。 2008年 获取排名第一、二的中国象棋软件均采用该机型。 2019年 推出采用Intel 超频Xeon&#xff08;28核4.8GHz&#xff09;显著提升电磁仿真频域算法求解、第一个解决8K视频解码与渲染。 今…...

编程日记 2023/4/14 7:52:51

js时间格式化精确到毫秒

/*** 数字前置补零* param value 值* param length 位数* returns {string}*/ export function digit(value, length 2) {if (typeof value "undefined" ||value null ||String(value).length > length) {return value;}return (Array(length).join("0&qu…...

编程日记 2023/5/29 22:36:33

QT样式表详解

本文详细介绍qt的样式表&#xff0c;包含样式表如何使用&#xff0c;常见语句和选择器。 背景说明 样式表用于设置外观&#xff0c;他是设置控件外观的方式之一。其他方式如下&#xff1a; 控件的成员函数&#xff0c;如QWidget::setBackground样式表调色板 优先级依次提高…...

编程日记 2023/4/14 7:42:48

最值得入手的好物有哪些，推荐几款实用的数码好物

随着科技的进步&#xff0c;越来越多的数码产品不断的出现在我们的生活中&#xff0c;这其中也不乏一些实用的数码产品&#xff0c;让我们可以享受更舒适的生活&#xff0c;提高我们的工作效率。下面就给大家分享几款我最近使用过的一些数码产品&#xff0c;它们不仅功能强大而…...

编程日记 2023/5/31 12:19:00

LongCat-Image-Editn效果展示：建筑效果图‘添加中文标牌+调整光照’案例

LongCat-Image-Edit效果展示&#xff1a;建筑效果图‘添加中文标牌调整光照’案例 1. 开篇&#xff1a;当AI学会“装修”建筑效果图 想象一下&#xff0c;你手里有一张刚出炉的建筑效果图&#xff0c;客户突然提出两个新需求&#xff1a;“能不能给大楼加上我们公司的中文招牌…...

编程新知 2026/3/28 21:27:49

【深度学习】RoBERTa：BERT的优化升级与实战应用

1. RoBERTa&#xff1a;BERT的全面进化 第一次接触RoBERTa时&#xff0c;我正为一个电商评论情感分析项目发愁。当时用BERT模型效果总是不稳定&#xff0c;直到尝试了RoBERTa&#xff0c;准确率直接提升了5个百分点。这个经历让我意识到&#xff0c;看似细微的技术改进在实际应…...

编程新知 2026/3/28 20:37:25

如何高效获取QQ音乐资源？MCQTSS_QQMusic带来的无损音乐解析方案

如何高效获取QQ音乐资源&#xff1f;MCQTSS_QQMusic带来的无损音乐解析方案 【免费下载链接】MCQTSS_QQMusic QQ音乐解析 项目地址: https://gitcode.com/gh_mirrors/mc/MCQTSS_QQMusic MCQTSS_QQMusic是一款专注于QQ音乐资源解析的开源工具&#xff0c;能够帮助用户突破…...

编程新知 2026/3/28 18:16:19

CAD 如何实现序号标注与明细表序号联动？

条件1、准备&#xff1b;如图&#xff0c;多重引线标注了5处件&#xff1b;明细表用表格录入表示&#xff1b;设置值2、设置序号值时&#xff0c;右键选择 “插入字段”&#xff1b;3、字段设置&#xff1b;依次选择&#xff1a;字段类别&#xff0c;选择 对象&#xff1b;字段…...

编程新知 2026/3/28 18:14:18

OpenClaw数据可视化：Qwen3.5-4B-Claude分析并绘制图表

OpenClaw数据可视化&#xff1a;Qwen3.5-4B-Claude分析并绘制图表 1. 为什么需要AI辅助的数据可视化 作为一个经常需要处理数据的开发者&#xff0c;我过去常常陷入这样的困境&#xff1a;花几个小时清洗和分析数据后&#xff0c;却在最后一步——可视化呈现上卡壳。该用折线…...

编程新知 2026/3/28 18:00:14

阿里通义Z-Image-Turbo效果展示：实测生成高质量图片案例分享

阿里通义Z-Image-Turbo效果展示&#xff1a;实测生成高质量图片案例分享 1. 为什么这款图像生成工具值得关注 在内容创作领域&#xff0c;高质量配图一直是提升作品吸引力的关键因素。传统方式要么需要专业设计技能&#xff0c;要么面临版权风险&#xff0c;而多数在线AI绘图…...

编程新知 2026/3/28 17:11:38

Hunyuan-MT-7B在文档翻译中的应用：一键部署，轻松处理多语言文档

Hunyuan-MT-7B在文档翻译中的应用&#xff1a;一键部署&#xff0c;轻松处理多语言文档 1. 为什么选择Hunyuan-MT-7B进行文档翻译 在全球化协作日益频繁的今天&#xff0c;企业和个人经常需要处理多语言文档。传统翻译方式要么成本高昂&#xff0c;要么质量参差不齐。Hunyuan…...

编程新知 2026/3/28 16:23:20

相机响应函数(CRF)的奥秘：为什么你的OpenCV计算结果每次都不一样？

相机响应函数(CRF)的稳定性挑战&#xff1a;从原理到OpenCV实战优化 每次用同样的代码计算相机响应函数(CRF)&#xff0c;结果却总是不尽相同&#xff1f;这背后隐藏着从硬件特性到算法实现的复杂交互。本文将带您深入理解CRF的本质&#xff0c;剖析OpenCV实现中的关键变量&…...

编程新知 2026/3/28 16:17:18

从‘保护大熊猫’到游戏设计：用Scratch克隆与子弹机制打造你的第一个塔防小游戏

从“保护大熊猫”到游戏设计&#xff1a;用Scratch克隆与子弹机制打造你的第一个塔防小游戏 当屏幕上那只笨拙的士兵射出第一发子弹&#xff0c;准确击中从天而降的怪物时&#xff0c;12岁的小林突然从椅子上跳了起来——他刚刚用Scratch实现了人生中第一个游戏机制。这个瞬间…...

编程新知 2026/3/28 16:11:08

从CVE-2023-3450看锐捷RG-BCR860路由器：一次网络诊断功能引发的命令注入实战剖析

1. 漏洞背景与设备介绍 锐捷RG-BCR860是面向中小型商业场景设计的云路由器&#xff0c;主打简单易用的中文Web管理界面。这款设备常见于连锁餐饮、快捷酒店等需要稳定网络环境的场所&#xff0c;最大支持150台终端同时接入。作为一款商用设备&#xff0c;它内置了安全审计模块和…...

编程新知 2026/3/28 15:39:02