两行css 实现瀑布流

news2024/12/23 1:18:11

html

<ul >

	<li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li>
	<li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li>
	<li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li>
	<li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li>
	<li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li>
	<li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li>
	<li><a href="" ><img src="05094532gc6w.jpg" alt="111" /><p>传奇</p></a></li>
					
</ul>

 css

ul{ width: 100%;columns: 5;column-gap: 10px;}
ul>li{break-inside: avoid;margin-bottom: 10px; }

效果:

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

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

相关文章

QT-QPainter实现一个动态充电的电池

1、效果 2、核心代码 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimer>

10万人寻梦玩具好莱坞 ,一人逆袭年销1.8个亿

文丨王一粟 周效敬 奥特曼、四驱赛车、毛绒玩具......如果有一个地方能实现玩具自由&#xff0c;那一定是广东澄海。 澄海是中国乃至世界的玩具之都&#xff0c;给亿万的孩子甚至长大了的孩子带来无数快乐&#xff0c;堪称玩具好莱坞。 无数的年轻人怀揣着实现财富自由的梦想…

电脑怎么恢复出厂设置?系统还原怎么操作?就看这5个方法!

电脑怎么恢复出厂设置&#xff1f;如果您的电脑出现问题&#xff0c;在电脑上恢复出厂重置非常有用。它基本上可以重置电脑&#xff0c;使其恢复到下线时的状态&#xff0c;给你一个全新的开始。众所周知&#xff0c;我们使用电脑的时间越长&#xff0c;电脑上的文件和程序就会…

win10 安装PowerShell

总结: 直接下一步,下一步… 下载链接 https://download.csdn.net/download/qq_43071699/89462517

增加了redis分布式锁,但是还是生成了重复数据

增加了redis分布式锁&#xff0c;但是还是生成了重复数据 原因 两个线程 第一个线程先获取锁&#xff0c;然后进行新增&#xff0c;此时第二个线程也进入方法体&#xff0c;尝试获取锁&#xff0c;结果没获取到&#xff0c;继续在5s内尝试&#xff0c;在redis获取锁等待5s的过…

React+TS 从零开始教程(1)

源码链接&#xff1a;https://pan.quark.cn/s/c6fbc31dcb02 创建项目 直接通过以下命令&#xff0c;我们来创建一个reactts的项目。 npx create-react-app myapp --template typescript这样就创建好了,然后我们导入vscode. npx是npm里面的一个库&#xff0c;可以让你自动使用…

嵌入式linux系统中UART子系统基本实现

今天主要给大家分享一下,如何使用linux系统中的UART帧结构。 第一:UART串口波形 先观察UART波形,是如何被准确识别成字符D,而不是其他的内容呢? 当两个设备需要通过UART协议进行通讯时,它们需要同时约定好以下内容: 每—位信号的时间长度T(波特率= 1/T) 帧结构中每—…

Faiss:选择合适的索引Index

向量相似性搜索彻底改变了搜索领域。它允许我们高效地检索从GIF到文章等各种媒体&#xff0c;即使在处理十亿级别数据集时&#xff0c;也能在亚秒级时间内提供令人印象深刻的准确性。 然而&#xff0c;这种灵活性也带来了一个问题&#xff1a;如何知道哪种索引大小最适合我们的…

118 杨辉三角

题目 给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 示例 输入: numRows 5 输出: [[1],[1,1],[1,2,1],[1,3,3,1],[1,4,6,4,1]] 解析 就是模拟法&#xff0c;没有什么特殊的…

房地产市场的三个背离 欧美市场混动占优,丰田押注小发动机

当前我国房地产市场二手房表现与新房表现明显背离&#xff0c;核心城市表现与低线城市开始背离&#xff0c;未来可能出现房价表现与开发投资景气表现背离。看好核心城市在政策推动下进一步释放需求推动市场结构性复苏的前景。 房地产开发景气度继续下行 2024年5月&#xff0c;…

【人工智能】—基于K-Means算法商场顾客聚类实战教程

在这篇博文之前一直是给大家做机器学习有监督学习教程&#xff0c;今天来一篇无监督学习教程。 K-Means算法是一种基于中心的聚类方法&#xff0c;它试图找到数据点的K个簇&#xff0c;使得簇内的数据点尽可能相似&#xff0c;而簇间的数据点尽可能不同。下面是K-Means算法的详…

第22篇 Intel FPGA Monitor Program的使用<五>

Q&#xff1a;如何用Intel FPGA Monitor Program创建C语言工程并运行呢&#xff1f; A&#xff1a;总体过程与创建汇编语言工程类似&#xff0c;不同的是在指定程序类型时选择C Program。 后续用到DE2-115开发板的硬件如LED、SW和HEX等外设时&#xff0c;还需要将描述定义这些…

全能AI客户端:ChatGPT Web Midjourney Proxy,AI绘画+GPT4o对话

这绝对是目前最全能的 AI 客户端&#xff0c;ui 界面集成 ChatGPT AI 对话、Midjourney AI 画图、Suno AI 音乐等等市面主流的 AI 功能&#xff0c;只需绑定一个 API key 即可使用全部 AI 功能&#xff0c;Midjourney 甚至比官方好用几倍&#xff01; 项目简介 ChatGPT Web Mi…

LDO的原理及测试方法

一、基本结构 这是LM317芯片的核心,这个电路单元称为Bandgap Reference带隙基准源。属于模拟集成电路中的经典电路结构。 LDO拓扑结构图 常见的基本结构 利用VBE的负温度系数,而VT是正温度系数,正负温度系数抵消就的得到稳定的基准参考电压了(三极管的方程VBE=VT*In(lC/IS…

Nature正刊!亚利桑那大学博士生陈舒立一作兼通讯最新成果!揭示亚马逊雨林干旱响应的生物地理学机制

2024年6月19日&#xff0c;国际知名学术期刊《Nature》发表了一项美国亚利桑那大学Scott Saleska教授团队的最新成果“Amazon forest biogeography predicts resilience and vulnerability to drought”。通过将森林样地调查数据与遥感观测相结合系统揭示了亚马逊雨林干旱响应的…

DAY04 HTMLCSS

文章目录 一 表单(1) 数字控件(2) 颜色控件(3) 日期控件(4) 月份控件(5) 星期控件(6) 搜索控件(7) 范围控件 二 浮动框架三 结构化标签四 CSS1 CSS概述2 CSS的编写位置1. inline style 行内样式2. inner style 内部样式3. outer style 外部样式4. 小结 3 CSS选择器1. 通用选择器…

uniapp小程序获取右上角胶囊位置信息

文章目录 导文使用uni.getMenuButtonBoundingClientRect();方法实现完整案例 隐藏默认导航栏&#xff1a;全局隐藏当前页面隐藏 导文 uniapp小程序获取右上角胶囊位置信息 使用uni.getMenuButtonBoundingClientRect();方法实现 <script>const menuButtonInfo uni.getMe…

el-table表格变更前后根据数据值改变背景颜色

需求&#xff1a; 1.左侧变更前表格数据不可以编辑&#xff0c;并且背景色加灰 2.右侧变更后表格数据可被编辑&#xff0c;编辑后变更前与变更后行数据不一致&#xff0c;添加背景色区分 3.点击删除的时候&#xff0c;给变更后表格当前行&#xff0c;添加背景色和删除的中横…

人工智能驱动材料科学前沿:微软与PNNL联合推进电池材料创新

新型电池技术的研发对实现绿色能源目标具有决定性意义 微软公司与美国太平洋西北国家实验室&#xff08;PNNL&#xff09;近期开展了一项开创性的合作&#xff0c;利用尖端人工智能技术&#xff0c;在极短时间内完成对海量潜在电池材料的系统筛选。 微软和PNNL的研究团队采用了…

使用RT-Thread Studio创建STM32项目

引言 RT-Thread&#xff08;简称RTT&#xff09;是一个开源的实时操作系统&#xff0c;主要面向嵌入式系统应用。它具有高度可裁剪性、跨平台、高可靠性和实时性等特性&#xff0c;广泛应用于物联网&#xff08;IoT&#xff09;、工业控制、智能家居和消费电子等领域。本文将介…