程序员经验分享-hwhale

用CSS显示不同大小的div

2023-12-05

如何显示不同高度的 div 使其彼此靠近，无论其高度如何，并具有特定的边距，就像建筑物一样
我的意思是类似这个网站中的 divhttp://via.me
我使用了 float:left 但它仅与最后一个 div 一起浮动并留下空白 这是我使用的代码http://jsfiddle.net/D9rHB/6/


我认为 jQueryMasonry在这种情况下，插件将是您正在寻找的：

Masonry 是 jQuery 的动态网格布局插件。将其视为 CSS 浮动的另一面。浮动先水平排列元素，然后垂直排列，而砌体则垂直排列元素，将每个元素放置在网格中的下一个开放点中。结果最大限度地减少了不同高度的元素之间的垂直间隙，就像石匠在墙上安装石头一样。

JS 小提琴演示.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

用CSS显示不同大小的div 的相关文章

  • 如何使用 tablesorter Stickyheaders 小部件 - 不起作用？

    我在尝试将 StickyHeaders 小部件实现为 tablesorter 插件的一部分时遇到问题 我已按照通过 Stackoverflow 和其他网站找到的教程中的说明进行操作 但似乎没有任何效果 这是我的header code

  • JavaScript 中的 CSS 边框

    我正在使用下面的过程从 JavaScript 修改 CSS 但它没有给出任何结果 任何人都可以检查代码并让我知道正确的方法 我需要带有半径的表格边框 这是我的表结构 table width 400 border 0 cellspacing

  • CSS 选择器不是元素类型的子元素？

    我想要风格code不在里面的元素a tags 实现这一目标的最佳方法是什么 code not a code 似乎根本不起作用 至少在 Chrome 上 尽管它似乎应该 https developer mozilla org en docs

  • Bootstrap 4.1 中悬停时的下拉菜单

    我有一个网站 我在其中创建了下拉菜单引导程序4 1 https getbootstrap com docs 4 1 dist css bootstrap min css 此时 下拉菜单正在点击 我用来创建下拉列表的 HTML 代码是 div

  • 如何将表情符号水平居中？

    在非视网膜显示屏上 unicode 表情符号字符似乎溢出了其边界框 但在视网膜显示屏上 它仍保留在字符边界内 那么如何在视网膜和非视网膜显示屏上将表情符号水平居中在 div 中呢 非视网膜 Retina 这适用于视网膜屏幕 但在非视网膜显示

  • 如何在iframe中插入html

    大家好 我需要在 iframe 中插入一个 html 字符串 如下所示 var html p body p jQuery popolaIframe click function parent indexIframe 0 documentEl

  • ScrollTop 在 Chrome/Safari 中不起作用

    我的网站上有一个循环内的表单 当有人提交表单时 查询字符串会添加到 URL 中 例如 updated 111 然后 我的 JQuery 脚本检查数字的 url 并在提交表单并重新加载页面后滚动到该 div 该脚本在 Firefox 中运行良

  • 如何使选择框水平和垂直居中

    我正在尝试将选择框水平和垂直居中 这是 jsfiddle http jsfiddle net j3r9Lp81 http jsfiddle net j3r9Lp81 CSS div currency text align center HT

  • MUI 组件上的渐变边框

    我没能找到相当于border image source css 我的目标是在按钮组件上渲染边框渐变 这是添加渐变边框的方法button成分 V5 const options shouldForwardProp prop gt prop gr

  • Ionic - 使用 item-avatar 类在项目列表中垂直居中文本

    我尝试将离子列表添加到我的应用程序中 其中项目构建如 Image Text Button 图像和按钮垂直居中 但文本没有 我尝试了一些在互联网上找到的CCS 它在浏览器预览中运行良好 但在真实设备上 Samsung Galaxy S3 Mi

  • 粉碎一个元素，向随机方向发送碎片

    我试图 粉碎 一个元素 例如 一个图像 并将其碎片朝随机方向飞行 当碎片到达目的地时 即x距离 以像素为单位 它们变成原始图像的较小版本 jQuery UI 的explode http api jqueryui com explode ef

  • 内容安全策略：页面设置阻止自行加载资源？

    我有基于 Java 的 Web 应用程序运行在Tomcat http en wikipedia org wiki Apache Tomcat6 我的应用程序在本地主机和端口 9001 上运行 为了使我的应用程序更加安全并降低风险XSS ht

  • 使用 jQuery 更改 SVG 元素的“xlink:href”属性

    我正在尝试使用单击事件更改 xlink href 属性 到目前为止它部分有效 这就是我正在做的 HTML a href class ui btn ui corner all ui shadow editIcon style text ali

  • IE 上具有最小宽度的内联跨度

    Hi我有 3 个SPAN那一定是inline并且有和一个min width 显然在 IE 上 SPAN不能有一个min width 我尝试使用DIV但当我把它放在inline the min width是忽略 CSS span displa

  • 如何使用javascript从特定标签获取HTML文档中的所有textNode？

    如何在不使用xpath或treewalker的情况下从单个数组中的一组特定标签中获取所有textNodes blockquote em h4 h6 p IE不允许您使用xpath和treewalker 请帮助我 如果脚本仅适用于 IE 那就

  • 如何使用 Angular CLI 添加应用程序范围的 CSS 文件？

    我想向我的 Angular 2 应用程序添加一些分片样式 例如字体和配色方案等将在任何地方使用的东西 过去 我总是通过在索引页面添加这样的标签来完成此操作 这不适用于 CLI 用于为应用程序提供服务的任何内容 我尝试在构建后手动将 css

  • bootstrap css中垂直对齐缩略图？

    我认为这应该很简单 但我就是无法让它发挥作用 在 ASP NET MVC 中 我有一个如下所示的项目列表 div class row div class span12 ul class thumbnails foreach var film

  • onClick 事件适用于触摸屏设备上的触摸吗？

    我用过onclick我的网站上的活动 但是 当我在谷歌浏览器的开发人员模式移动视图中打开它时 触摸使用鼠标单击的元素没有任何反应 所以我的问题是 我还必须添加吗ontouch事件连同onclick事件或 onClick 事件适用于所有触摸屏

  • 用于生成多色文本的 jQuery 插件，该文本可在悬停时改变颜色

    我想为各种链接生成多色文本 并从预先指定的颜色数组中为各个字母随机分配颜色 当将鼠标悬停在带有文本的 div 上时 颜色会发生变化 我正在考虑一个 jQuery 插件 脚本将是可行的方法 我想知道是否存在这样的插件或近似插件 Thanks

  • 隔离必需的字段验证器？

    我在页面上有两个搜索按钮 一个链接到下拉列表 另一个链接到带有文本框的下拉列表以获取更多搜索条件 我在所有上述控件上都需要现场验证器 当我从第一个下拉列表中选择某些内容并单击相应的搜索按钮时 文本框的字段验证器会触发 从而禁用第一个搜索按钮

随机推荐

  • Pipeline 上的 Sklearn GridSearchCV 用于测试多个变换和估计器

    我正在尝试使用 Pipeline 构建 GridSearchCV 并且我想测试变压器和估计器 有更简洁的方法吗 pipeline Pipeline imputer SimpleImputer scaler StandardScaler pc

  • 如何在 Kotlin 中获取随机数？

    一种通用方法 可以像 ruby 一样返回两个参数之间的随机整数rand 0 n 有什么建议吗 我的建议是扩大功能于IntRange创建这样的随机数 0 10 random TL DR Kotlin gt 1 3 一个适用于所有平台的随机数

  • 定义函数并从函数返回函数？

    如何在函数内定义并返回函数 例如 我们有一个类似的函数 float foo float val return val val 现在 需要的是像 bar 这样的函数 typedef float func t float Rubish pseu

  • 在 Prolog 中生成整数的最佳方法

    我想生成整数 并且正在寻找实现此目的的最佳方法 例子 number2 N N 0 N 1 N 2 and so on 现在我只是使用length 2 number2 N length N 但我认为应该有一些更好的方法 无需创建临时列表 我可

  • 根据前一行数据自动计算sql表中的列

    我使用 sql server 作为后端在 asp net c 中开发我的应用程序 现在我需要创建一个带有自动计算列 期末余额 的表 如下所示 Date in stock out stock closing balance 2 3 2013

  • Python 编码风格中的空格

    Python 教程说 在运算符周围和逗号之后使用空格 但不要直接在括号结构内使用空格 a f 1 2 g 3 4 不直接在括号结构内 到底是什么意思 这大概来自于PEP 8 Python 代码风格指南 具体请参阅 表达式和语句中的空格 部分

  • 如何找到元组列表中每个相似条目的平均值？

    我有这个元组列表 Jem 10 Sam 10 Sam 2 Jem 9 Jem 10 如何求每个名字加上的数字的平均值 即用 Jem 存储在一个元组中的所有数字的平均值 然后输出它们 在此示例中 输出将是 Jem 9 66666666667

  • 500 无证错误：在 FastAPI 中返回响应时出现内部服务器错误

    我正在使用 FastAPI 通过 ML 模型进行预测 当我给一个task id and input 应用程序应将其添加到后台任务并相应地返回响应 然而 我得到Error 500当我尝试这样做时 添加后task id globally 它在正

  • 如何处理 URISyntaxException

    我收到此错误消息 java net URISyntaxException Illegal character in query at index 31 http finance yahoo com q h s IXIC My Url htt

  • 通过公式从单元格中提取所需数据

    我一直在使用下面的公式从单元格中提取所需的结果 但现在我试图从单元格中获取更多数据 并且我最终尝试从单元格中获取更多值 但它不起作用 我附上了一张谷歌表格 其中提供了数据和所需的结果以及我的公式 任何帮助将不胜感激 ArrayFormula

  • 在下拉选择中，如何从数据库填写完整的表单字段

    如何根据从下拉列表中选择的值从数据库填写完整的表单输入字段 示例 在应用程序中 通过选择客户名称 它会使用数据库中存储的详细信息填充完整的表单输入字段 Sample Code

  • 在 matlab 中以一般形式绘制二次曲面

    I have Quadric Surface equation 我知道A B C 如何在 matlab 中绘制方程 最好的选择是生成函数的 3D 等高线图 其中函数值为 0 处具有单个等高线 要以合理的精度完成此操作 请在多个点 x y z

  • 让控制台等待用户输入关闭

    我有一个控制台应用程序 在执行其任务后 必须向用户提供反馈 例如 操作完成 或 操作失败 以及详细的错误 问题是 如果我只是 让它运行 输出消息将被打印 但控制台将很快关闭 没有时间阅读消息 据我记得 在 C 中 每个控制台应用程序都会以

  • 使用 php/mysql 在 googlemaps 上动态绘制折线

    我是 google 地图 API 的新手 我为我的手机编写了一个小应用程序 可以定期将其位置更新到 SQL 数据库 我想在我的浏览器中的谷歌地图上显示此信息 理想情况下 我想定期轮询数据库 如果有任何新的坐标到达 请将它们添加到行中 描述它

  • swig + mono：找不到库的 C# 示例错误

    我在 Mac OS X 10 6 4 上使用 swig 2 0 1 mono 2 6 2 8 整体构建没问题 C 示例的构建也没问题 问题是 当我运行示例 mono runme exe 时 我总是收到以下错误 Unhandled Excep

  • numpy 数组中值数组的位置

    这是一个小代码来说明问题 A array 1 2 1 0 5 3 f of A f A this is precomputed and expensive values array 1 2 1 0 location of values in

  • 为什么这个 Gnuplot 中的 autotitle 错误？

    Data Model Decreasing Constant Increasing 2025 73 78 80 85 87 92 2035 63 68 80 85 97 107 2050 42 57 75 90 104 5 119 5 基于

  • CFNetwork SSLHandshake 在使用 localhost 的 iOS 模拟器上失败 (-9807)

    我正在尝试连接openssl s server和 iOS 客户端使用 TCP SSL 但得到CFNetwork SSLHandshake failed 9807 Objective C 代码 从这里 void viewDidLoad sup

  • 从 Java 使用 .net WCF 服务

    我是 Java 新手 认为在我已经熟悉的 NET WCF 服务之上实现客户端应用程序是一次很好的学习练习 我从最新的 JAX WS 运行 wsimport bat https jax ws java net 来生成客户端代理 但是我仍然坚持

  • 用CSS显示不同大小的div

    如何显示不同高度的 div 使其彼此靠近 无论其高度如何 并具有特定的边距 就像建筑物一样我的意思是类似这个网站中的 divhttp via me 我使用了 float left 但它仅与最后一个 div 一起浮动并留下空白 这是我使用的代

热门标签