CSS总结——瀑布流布局

瀑布流布局

瀑布流布局是一种新型的布局方式,可以将大小不一的图片完整的显示在页面上,并且在杂乱的布局中保持着一定的美感,今天学习了一下如何使用瀑布流布局,总结了有以下三种方式。(瀑布流还可以使用grid布局实现,还没有学习过这种方式)

<div class="container" id="con"><div class="item"><img src="../img/1.jpeg" alt=""></div><div class="item"><img src="../img/2.jpeg" alt=""></div><div class="item"><img src="../img/3.jpeg" alt=""></div><div class="item"><img src="../img/4.jpeg" alt=""></div><div class="item"><img src="../img/5.jpeg" alt=""></div><div class="item"><img src="../img/6.jpeg" alt=""></div><div class="item"><img src="../img/7.jpeg" alt=""></div><div class="item"><img src="../img/8.jpeg" alt=""></div><div class="item"><img src="../img/9.jpeg" alt=""></div><div class="item"><img src="../img/10.jpeg" alt=""></div><div class="item"><img src="../img/11.jpeg" alt=""></div><div class="item"><img src="../img/12.jpeg" alt=""></div><div class="item"><img src="../img/13.jpeg" alt=""></div><div class="item"><img src="../img/14.jpeg" alt=""></div><div class="item"><img src="../img/15.jpeg" alt=""></div></div>
 .container{column-count: 4;//想要排成的列数column-gap: 0;}.item img{width: 100%;}

 

 

 

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

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

相关文章

Nginx 部署前端 Vue 项目实战指南

一、环境准备 1. 安装 Nginx 首先&#xff0c;需要在服务器上安装 Nginx。Nginx 是一款轻量级、高性能的 HTTP 和反向代理服务器。安装方式因操作系统而异。 Linux 系统&#xff08;以 Ubuntu 为例&#xff09;&#xff1a; sudo apt-get update sudo apt-get install nginxWi…

【Android】Material Design编写更好的UI

Toolbar 对于控件ActionBar我们非常熟悉&#xff0c;就是我们常见的标题栏&#xff0c;但ActionBar只能位于活动的顶部&#xff0c;因此我们更建议使用Toolbar。在新建一个项目的时候都是默认显示ActionBar&#xff0c;我们要使用Toolbar就需要先将标题栏改为不显示 先来看看…

HMI触屏网关-VISION如何与Node-red通信

上文&#xff1a;HMI触屏网关-VISION如何与Modbus TCP从机通信-CSDN博客 1. Node-red启用HTTP监听 HTTP监听&#xff0c;用于模拟WebAPI服务端&#xff0c;接收WebAPI客户端GET请求。 启用HTTP监听服务&#xff0c;选择请求方式GET&#xff1b;URL自定义&#xff0c;本示例设…

在 Maven 的 POM 文件中配置 npm 镜像源

在使用 Maven 构建前端项目时&#xff0c;可能会遇到网络问题&#xff0c;导致 Node.js 或 npm 依赖无法下载&#xff0c;特别是在国内网络环境中。如果你在使用 frontend-maven-plugin 插件来管理 Node.js 和 npm&#xff0c;那么通过配置镜像源可以有效解决这些问题。本文将介…

LavaDome:一款基于ShadowDOM的DOM树安全隔离与封装工具

关于LavaDome LavaDome是一款针对HTML代码安全和Web安全的强大工具&#xff0c;该工具基于ShadowDOM实现其功能&#xff0c;可以帮助广大研究人员实现安全的DOM节点/树隔离和封装。 在当今的Web标准下&#xff0c;尚无既定方法可以安全地选择性地隔离DOM子树。换句话说&#x…

【ceph学习】rgw网关进程如何启动

rgw 网关进程启动 主要在rgw_main.cc的main函数中&#xff0c;主要涉及一些关键线程启动、前端服务器&#xff08;beast等&#xff09;启动、后端存储模块启动&#xff08;rados&#xff09;、perf和log启动等。 流程图关键节点如下&#xff1a; 1、beast的启动 2、rados的启…

Android Camera系列(一):SurfaceView+Camera

心行慈善&#xff0c;何需努力看经—《西游记》 本系列主要讲述Android开发中Camera的相关操作、预览方式、视频录制等&#xff0c;项目结构代码耦合性低&#xff0c;旨在帮助大家能从中有所收获&#xff08;方便copy :&#xff09; &#xff09;&#xff0c;对于个人来说也是一…

vue 批量导出pdf 压缩包 zip

vue 批量导出pdf 压缩包 zip 使用插件 html2canvas jspdf jszip &#xff08;百度ai搜出来的是zip-js 这个没法安装&#xff09; file-saver 思路&#xff1a; 1.使用 html2canvasjspdf 将页面转图片转pdf&#xff08;这个怎么转的可以网上搜下很多&#xff09; 2.利用jszipfil…

【免费分享】易上手的STM32多核心开发板资料包一网打尽,教程+课件+视频+项目+源码

想要深入学习STM32开发吗&#xff1f;现在机会来了&#xff01;我们为初学者们准备了一份全面的资料包&#xff0c;包括原理图、教程、课件、视频、项目、源码等&#xff0c;所有资料全部免费领取&#xff0c;课程视频可试看&#xff08;购买后看完整版&#xff09;&#xff0c…

PostgreSQL技术内幕7:PostgreSQL查询编译

文章目录 0.简介1.整体过程2.查询分析2.1 Lex2.2 Yacc2.3 PG词法分析和语法分析介绍2.4 PG语义分析 4.查询优化4.1 预处理4.1.1 提升子链接和子查询4.1.2 预处理表达式4.1.3 处理HAVING子句 4.2 改进查询树4.2.1 路径生成4.2.2 代价估计 4.3 计划生成 0.简介 一次完整的SQL执行…

STM32基础篇:PWR

PWR简介 PWR&#xff08;Power Control&#xff09;&#xff0c;为电源控制模块&#xff0c;负责管理STM32内部的电源供电部分&#xff0c;可以实现可编程电压监测器和低功耗模式的功能。 1、可编程电压监测器 简称PVD&#xff0c;可以监控VDD电源电压。当VDD下降到PVD阀值以…

Spring Boot 整合 Sentinel 实现流量控制

在微服务架构中&#xff0c;流量控制是保障系统稳定性和高可用性的关键技术之一。阿里巴巴开源的 Sentinel 是一款面向分布式系统的流量防护组件&#xff0c;旨在从流量控制、熔断降级、系统负载保护等多个维度保障服务的稳定性。本文将详细介绍如何在 Spring Boot 项目中整合 …

挑战黑神话, 不升级武器通关

第一关随便打打 第二关,提前杀了疯虎,加攻击, 并且自己的点也早点点上攻击力,推荐还是拿了定风珠打, 否则沙尘暴不好处理,需要多打几个回合.玲珑内丹可以去第一关刷小怪 第三关.早点去拿禁 第四关.躲好蝎子的甩尾之后上去劈棍xyy即可. 第五关. 打了这个红孩儿很久,可以考虑跑蓄…

爬虫入门学习

流程 获取网页内容 HTTP请求 Python Requests解析网页内容 HTML网页结构 Python Beautiful Soup储存或分析数据 HTTP (Hypertext Transfer Protocol) 客户端和服务器之间的请求-响应协议 Get方法&#xff1a;获得数据 POST方法&#xff1a;创建数据 HTTP请求 请求行 方法类型…

CPP八股文-模板类.内存管理,指针

为什么模板类的定义需要放在头文件中&#xff1f; 无论是类模板还是函数模板&#xff0c;都是一个蓝图&#xff0c;本身不是一个类或函数&#xff0c;编译器用模板产生指定的类或函数的特定类型版本。产生模板的特定类型实例的过程称为模板的实例化。所以一般将模板类放在头文…

rv1126-rv1109-mkcramfs-mkfs.cramfs-打包文件系统

事情是这样的: 定制了文件系统打包功能;然后我是根据这个指令 fakeroot mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img mkfs.cramfs rootfs_glibc_rv1126/ rootfs.img 起因就是这个fakeroot; 不加的话打出来的rootfs.img是没有用户权限的 然后我根据fakeroot mkfs.cramfs ro…

vue仓库的使用

Vue仓库通常指的是使用Vue CLI创建的项目仓库&#xff0c;它包含了项目的所有源代码、配置文件以及依赖项。以下是如何使用Vue仓库的一些基本步骤和最佳实践&#xff1a; 创建Vue项目 首先&#xff0c;你需要安装Vue CLI&#xff0c;然后使用它来创建一个新的Vue项目。 npm i…

AcWing算法基础课-785快速排序-Java题解

大家好&#xff0c;我是何未来&#xff0c;本篇文章给大家讲解《AcWing算法基础课》785 题——快速排序。这篇文章介绍了使用快速排序算法对整数数列进行排序的方法&#xff0c;包括选择基准元素、分区操作和递归排序子数组。通过详细的步骤和示例&#xff0c;解释了快速排序的…

MySQL之数据库基础

目录 一、数据库 1、基本概念 2、常见的数据库 3、MySQL数据库 连接MySQL服务器 数据逻辑存储 二、数据库和表的本质 三、SQL语句 四、服务器&#xff0c;数据库&#xff0c;表的关系 五、存储引擎 查看存储引擎 一、数据库 1、基本概念 一般来说&#xff0c;数据库…

es映射配置(_mapping)

文章目录 1、创建映射字段2、查看映射关系 1、创建映射字段 PUT /索引库名/_mapping {"properties": {"字段名": {"type": "类型","index": true&#xff0c;"store": true&#xff0c;"analyzer": &q…