多列布局

CSS3之多列布局columns CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。

设置列宽

column-width： | auto 设置对象的宽度；使用像素表示。 auto：根据 <’ column-count '> 自定分配宽度

<style>.all{column-width: 300px;}  
</style>
<body><div class="all"><h3>第一段</h3><p>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。</p><h3>第一段</h3><p>xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。不过，即使 XHTML 文档中的 <html> 没有使用此属性，W3C 的验证器也不会报错。这是因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，即使您没有包含它，此值也会被添加到 <html> 标签中。</p><h3>第一段</h3><p>注释：即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。</p><h3>第一段</h3><p>这个例子是一个很简单的 HTML 文件，使用了尽量少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。</p></div>
</body>
设置列数

column-count： | auto 用来定义对象中的列数，使用数字 1-10表示。 auto：根据 <' column-width '> 自定分配宽度

.all{/* 设置列数 */column-count: 3;
}
同时设置列宽和列数

columns: <‘column-width’> || <‘column-count’> 设置对象的列数和每列的宽度。复合属性。 宽度和列数的合成；

.all{/* 设置列宽为100px,分3列，但是还是以列数为标准 */columns:100px 3;
}
列和列之间的间距

column-gap: normal || length， normal是默认值，为1em， length 是用来设置列与列之间的间距。

.all{column-count: 3;/* margin-left  + margin-right */column-gap: 40px;
}
列和列之间的边框

column-rule：<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color '> 设置对象的列与列之间的边框。复合属性：包括边框的粗细，颜色，样式 样式： dotted 点状边框 dashed 虚线 double 双线 solid 实线

.all{column-count: 3;/* margin-left  + margin-right 
/column-gap: 40px;
*  /*3像素的间隔线 */column-rule: 3px dotted gray;
}
列高是否统一

column-fill：auto | balance 设置对象所有列的高度是否统一; auto： 列高度自适应内容; balance： 所有列的高度以其中最高的一列统一 两个效果基本上一样，没有太大变化

横跨多少列

column-span 属性规定元素应横跨多少列。 column-span: 1|all; 默认为1，一般情况下设置为all

<style>.all{column-count: 3;/* margin-left  + margin-right */column-gap: 40px;column-rule: 3px dotted gray;}.p1{column-span: all;}</style>
<div class="all"><p class="p1">这是一个标题</p><h3>第一段</h3><p>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。</p><h3>第二段</h3><p>xmlns 属性在 XHTML 中是必需的，但在 HTML 中不是。不过，即使 XHTML 文档中的 <html> 没有使用此属性，W3C 的验证器也不会报错。这是因为 "xmlns=http://www.w3.org/1999/xhtml" 是一个固定值，即使您没有包含它，此值也会被添加到 <html> 标签中。</p><h3>第三段</h3><p>注释：即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。</p><h3>第四段</h3><p>这个例子是一个很简单的 HTML 文件，使用了尽量少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。</p>
</div>
案例：使用多列布局实现瀑布流效果

<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>标题</title><link rel="shortcut icon" href="favicon.ico"><style>* {margin: 0;padding: 0;}.container {width: 96%;margin: 20px auto 20px;}.waterfall {/* 最多氛围多少列 */column-count: 3;-webkit-column-count: 3;-moz-column-count: 3;-ms-column-count: 3;-o-column-count: 3;/* 每列之间的间距是多少 
/column-gap: 15px;-webkit-column-gap: 15px;-moz-column-gap: 15px;-ms-column-gap: 15px;-o-column-gap: 15px;}.item {display: inline-block;width: 100%;
*            /*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 */box-sizing: border-box;padding: 1em;background-color: white;border: 1px solid #ccc;border-radius: 4px;-webkit-border-radius: 4px;/* 设置上下间距 */margin-bottom: 10px;/*  需要设置 height: 100%; overflow: auto */height: 100%;overflow: auto;}.item img {width: 100%;padding-bottom: 1em;margin-bottom: 0.5em;border-bottom: 1px solid #cccccc;}</style><body><div class="container"><div class="waterfall"><div class="item"><img src="img/1.jpg" /><p>我来测试demo111111</p></div><div class="item"><img src="img/7.jpg" />我来测试demo2222</div><div class="item"><img src="img/2.jpg" /><p>我来测试demo3333</p></div><div class="item"><img src="img/9.jpg" /><p>我来测试demo4444</p></div><div class="item"><img src="img/4.jpg" /><p>我来测试demo5555</p></div><div class="item"><img src="img/5.jpg" /><p>我来测试demo6666</p></div><div class="item"><img src="img/6.jpg" /><p>我来测试demo7777</p></div><div class="item"><img src="img/8.jpg" /><p>我来测试demo8888</p></div><div class="item"><img src="img/9.jpg" /><p>我来测试demo8888</p></div></div></div></body>
</html>

使用js实现多列布局

<style>
{margin: 0px;padding: 0px;
}
div {width: 150px;position: absolute;border: 1px solid;
}
img {display: inline-block;width: 150px;
}
#wrap {position: relative;width: 100%;
}
</style>
<body><div>瀑布流<img src="./img/1.jpg" alt=""></div><div>瀑布流<img src="./img/2.jpg" alt=""></div><div>瀑布流<img src="./img/3.jpg" alt=""></div><div>瀑布流<img src="./img/4.jpg" alt=""></div><div>瀑布流<img src="./img/5.jpg" alt=""></div><div>瀑布流<img src="./img/6.jpg" alt=""></div><div>瀑布流<img src="./img/7.jpg" alt=""></div><div>瀑布流<img src="./img/8.jpg" alt=""></div><div>瀑布流<img src="./img/9.jpg" alt=""></div>
</body>
<script>var div = document.getElementsByTagName("div");//因为图片较多，在加载时，就加载图片window.onload = function(){Full();}// Full()//当窗口大小改变时，重新分列并排序window.onresize = function(){Full();}//瀑布流函数function Full(){//1. 获取瀑布流求分几列var pw = document.documentElement.offsetWidth;   //页面宽度var dw = div[0].offsetWidth;           //每个div宽度var cols = Math.floor(pw/dw);//缝隙数等于列数加1，例如6行有7个缝隙var white = (pw - dw * cols)/(cols + 1);//每一列定位var t = 10;var arr = []; // 2. 默认以第一张图片的宽度为多列布局每列的宽度for(var i = 0;i<cols;i++){var pos = {//计算每个div的坐标(开始让每个top取一个固定值)//横坐标每次不变，只有top变/*div[0]   left: whitediv[1]   left: white2 + dw*        div[2]   left: white*3 + dw*2*/x:Math.floor((i+1)*white+dw*i),y:t}arr.push(pos);      //将坐标存入数组}for(var i=0; i<div.length;i++){var index = getMinTop(arr);// 循环遍历第一行数据div[i].style.left = arr[index].x+'px';div[i].style.top = arr[index].y+'px';// 把图片的高度存储在元素的y属性中；改变已经显示图片的y值arr[index].y += div[i].offsetHeight + t;// 查找最小高度的列，默认以arr[0]的y坐标作为最小的列// 第二行最小的列，就是图片高度最低的}}//求每次最小高度的列function getMinTop(arr){var minT = arr[0].y;// console.log(minT);var index = 0;for(var k = 0;k<arr.length;k++){if(arr[k].y < minT){minT = arr[k].y;index = k;}}return index;}
</script>

参考文档：https://blog.csdn.net/qq_47443027/article/details/119981423

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

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Chrome插件快速上手

Chrome插件快速上手

目录 前言 一、浏览器插件的主要功能 二、插件的工作原理 插件结构 manifest.json icons background.js content-scripts 三、插件例子 popup popup.html popup.js styles.css background.js content-script.js manifest.json 四、其它 前言 本文不做特殊说明…
阅读更多...
moment和dayjs

moment和dayjs

一&#xff1a;moment和dayjs 区别moment 大且可变、维护模式&#xff1b;dayjs 小且不可变、插件化、tree‑shaking 友好。antd v4 用 moment&#xff1b;antd v5 用 dayjs。请在同一项目中统一其一&#xff0c;避免混用导致组件报错。二&#xff1a; antd 4.24.16&#xff08…
阅读更多...
Flutter Packge - 组件应用

Flutter Packge - 组件应用

一、组件创建1. 在工程根目录创建 packages 目录。mkdir packages #创建文件夹 cd packages 2. 创建纯 Dart Package&#xff08;适合工具类/UI组件&#xff09;。flutter create --templatepackage common_network二、组件配置1. 在 common_network 的 pubspec.yaml 中添加…
阅读更多...
基于双块轻量级神经网络的无人机拍摄的风力涡轮机图像去雾方法

基于双块轻量级神经网络的无人机拍摄的风力涡轮机图像去雾方法

基于双块轻量级神经网络的无人机拍摄的风力涡轮机图像去雾方法 UAV-Taken Wind Turbine Image Dehazing With a Double-Patch Lightweight Neural Network 我是菜鸡&#xff01;我是菜鸡&#xff01;我是菜鸡&#xff01; 如果老师及学姐学长对该文有任何意见&#xff0c;请…
阅读更多...
Spring AI Alibaba 项目接入阿里云百炼平台大模型

Spring AI Alibaba 项目接入阿里云百炼平台大模型

1 依赖jdk 21 springboot 3.4.5 spring-ai-alibaba-starter-dashscope 1.0.0.2<properties><java.version>21</java.version><spring-ai.version>1.0.0</spring-ai.version><spring-ai-alibaba.version>1.0.0.2</spring-ai-alibaba.v…
阅读更多...
电脑和手机访问网站，自动检测跳转不同网站

电脑和手机访问网站，自动检测跳转不同网站

自动检测跳转不同网站 自动检测设备手机或电脑来跳转不同网页 开箱即用&#xff0c;不过需要自己修改一下跳转链接 源码截图&#xff1a; 下载地址&#xff1a;电脑和手机访问网站&#xff0c;自动检测跳转不同网站.zip - 蓝奏云
阅读更多...
Spring Boot 集成 ShardingSphere 实现读写分离实践

Spring Boot 集成 ShardingSphere 实现读写分离实践

Spring Boot 集成 ShardingSphere 实现读写分离实践 在高并发的业务场景中，数据库往往是系统性能的瓶颈。为了提高系统的吞吐量和稳定性，读写分离是一种常见的优化方案。本文将详细介绍如何使用 Spring Boot 结合 ShardingSphere 实现数据库的读写分离，并提供完整的配置和实…
阅读更多...
以rabbitmq为例演示podman导出导入镜像文件

以rabbitmq为例演示podman导出导入镜像文件

1. 导出镜像为 tar 文件 将镜像保存为压缩包&#xff08;默认格式为 docker-archive&#xff09;&#xff1a; podman save -o rabbitmq_management.tar docker.io/rabbitmq:management-o&#xff1a;指定输出文件名&#xff08;如 rabbitmq_management.tar&#xff09;。镜像名…
阅读更多...
LIS（最长上升子序列）与LCS（最长公共子序列）

LIS（最长上升子序列）与LCS（最长公共子序列）

最长上升子序列定义&#xff1a;给出一个数字序列&#xff08;arr&#xff09;&#xff0c;求出其中长度最长的数值严格递增的子序列做法一&#xff1a;使用动态规划&#xff0c;我们定义dp[i]为以arr[i]结尾的最长上升子序列的长度。#include<bits/stdc.h> using namesp…
阅读更多...
javaSE(基础)：5.抽象类和接口

javaSE(基础)：5.抽象类和接口

抽象类一.理解抽象类思维&#xff1a;假如我想定义一个Shape&#xff08;图形类&#xff09;类&#xff0c;我在这个类中写了一个draw()方法&#xff0c;但是这个方法是不能用来描述图形形状的&#xff08;不能有方法体&#xff09;&#xff0c;因为我只要对他进行了准确描述&a…
阅读更多...
ESG评级可持续发展之路，ESG评级的好处

ESG评级可持续发展之路，ESG评级的好处

在商业文明的演进历程中&#xff0c;ESG评级正成为衡量企业价值的全新坐标系。这套融合环境&#xff08;Environmental&#xff09;、社会&#xff08;Social&#xff09;和治理&#xff08;Governance&#xff09;三大维度的评估体系&#xff0c;犹如一盏明灯&#xff0c;指引…
阅读更多...
camera人脸识别问题之二：【FFD】太阳逆光场景，人像模式后置打开美颜和滤镜，关闭heif拍摄格式对着人脸拍照，成像口红出现位置错误

camera人脸识别问题之二：【FFD】太阳逆光场景，人像模式后置打开美颜和滤镜，关闭heif拍摄格式对着人脸拍照，成像口红出现位置错误

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; camera人脸识别问题之二&#xff1a;【FFD】太阳逆光场景&#xff0c;人像模式后置打开美颜和滤镜&#xff0c;关…
阅读更多...
YOLO-Count：用于文本到图像生成的可微分目标计数

YOLO-Count：用于文本到图像生成的可微分目标计数

摘要 https://arxiv.org/pdf/2508.00728v1 我们提出了YOLO-Count&#xff0c;一种可微分的开放词汇目标计数模型&#xff0c;旨在解决通用计数挑战并实现文本到图像(T2I)生成的精确数量控制。核心贡献是"基数"图(cardinality map)&#xff0c;这是一种新颖的回归目标…
阅读更多...
Go 的错误处理方式深度解析—— error vs panic vs recover：机制原理与实战取舍

Go 的错误处理方式深度解析—— error vs panic vs recover：机制原理与实战取舍

一、Go 的错误处理哲学Go 的设计哲学鼓励明确的、显式的错误处理方式。它不像 Java 或 Python 使用异常机制&#xff0c;而是采用了返回值 error 的方式&#xff0c;让错误成为程序流程的一部分。Go 的错误处理核心理念是&#xff1a; 错误是值&#xff08;Errors are values&a…
阅读更多...
官方Windows系统部署下载工具实践指南

官方Windows系统部署下载工具实践指南

摘要&#xff1a;本文介绍两款用于获取微软正版系统部署文件的工具&#xff0c;适用于需要快速搭建Windows环境的技术人员。所有工具均基于官方渠道实现&#xff0c;不涉及系统修改或激活功能。一、Windows系统镜像下载方案工具名称&#xff1a;Windows镜像直链下载工具 核心功…
阅读更多...
Pandas query() 方法详解

Pandas query() 方法详解

Pandas query() 方法详解query() 是 Pandas 中一个非常强大的方法&#xff0c;它允许你使用字符串表达式来筛选数据行。这种方法比传统的布尔索引更简洁、更易读。基本语法df.query(expr, inplaceFalse, **kwargs)expr: 查询字符串表达式inplace: 是否原地修改 DataFrame (默认…
阅读更多...
Linux系统层IO

Linux系统层IO

1.c语言文件操作 fopen&#xff1a;打开文件&#xff0c;模式 "w"&#xff08;写&#xff0c;覆盖&#xff09;或 "r"&#xff08;读&#xff09;。 fwrite&#xff1a;fwrite(data, size, count, fp)&#xff0c;按 size 字节写入 count 次数据。 fread…
阅读更多...
QT中的trimmed() 方法（1）

QT中的trimmed() 方法（1）

QT中的trimmed() 方法&#xff08;2&#xff09; trimmed() 是 Qt 框架 中 QString 类提供的一个方法&#xff0c;用于 去除字符串首尾的空白字符&#xff08;whitespace characters&#xff09;。它的作用类似于标准 C 中的 std::string 的 trim 操作&#xff0c;但专为 Qt 的…
阅读更多...
动漫软件集合分享

动漫软件集合分享

通过网盘分享的文件&#xff1a;动漫软件 链接: https://pan.baidu.com/s/1TD_OmaAZksfFxJ4PW6rS-w?pwd1234 提取码: 1234 打印动漫.apk 当鸟动漫.apk 动漫共和国【OmoFun复活】.apk 咕咕香.apk 黑猫动漫.apk 团次元【推荐】.apk 橘漫.apk 曼波.apk 萌国.apk 趣动漫.apk 三…
阅读更多...
Mysql与Ooracle 索引失效场景对比

Mysql与Ooracle 索引失效场景对比

MySQL 和 Oracle 作为主流关系型数据库&#xff0c;其索引失效的场景既有共性&#xff0c;也因底层优化器、索引类型支持等差异存在不同。以下从常见索引失效场景对比两者的表现及原因&#xff1a;一、索引列上使用函数 / 表达式共性&#xff1a;若直接在索引列上使用函数或表达…
阅读更多...
最新文章

Copyright @ 2022~2023