CSS 100% 宽度,每 20px 步长

2024-04-07

是否可以在纯CSS中设置一些宽度变化的步骤?

假设我的 div 宽度为 100%,所以当容器为 30px 时,它的宽度将为 30px。但是是否可以将一些“跳跃”设置为 20px,这样当容器为 30px 时,它仍然是 20px,但是当容器为 40px 时,它会得到 40px,因为 40 是 20 的倍数?

换句话说 - 强制某些元素的宽度限制为某个整数的倍数。


我已经用 JS 完成了它,但我将它与一些 css 解决方案混合在一起:

$.fn.widthStep = function(step)
{
    var width = $(this).width();
    $(this).css('max-width', width - width%step);
}

它将 max-width css prop 设置为最大可能宽度,即“step”的乘积,并且

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

CSS 100% 宽度,每 20px 步长 的相关文章

  • 为什么使用 iPhone 或 iOS 设备在“iframe”中查看“position:fixed”时不起作用?

    我研究过 stackoverflow 似乎position fixed在 iOS 移动设备的 iframe 中 https stackoverflow com questions 15874910 position fixed and if
  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在
  • 使用“表单控件”删除输入字段的轮廓

    我有一个输入字段 如下所示 在类名中我将其作为form control
  • TDD/测试 CSS 和 HTML? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha
  • 如何在日期选择器中设置不在当前月份的单元格的样式

    我目前正在为我的 JavaFX 应用程序制作注册表 问题是 当日期选择器中的单元格不在页面的月份上时 我想让该单元格变灰 让我们看看我当前的日期选择器 我的日期选择器 正如您所看到的 我希望下个月的日期 27 日 28 日 30 日以及 1
  • 如何在bootstrap中默认隐藏侧边栏?

    我在这里有一个很好的参考 作为 Bootstrap 在设计 Web 表单应用程序时的侧边栏 http startbootstrap com template overviews simple sidebar http startbootst
  • 在流体设计中将元素的宽度调整为其高度的百分比,反之亦然? [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • 将父容器扩展至 100% 高度以容纳浮动内容

    我正在为一个客户项目而苦苦挣扎 我的全部divs 没有绝对定位 height 100 for html body 和容器divs 但静态内容未达到其内容 在 910 像素处 我可以将溢出属性更改为auto 并且背景会继续向下到内容的末尾 但
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 悬停时为 SVG 制作动画

    我正在尝试在悬停时为 SVG 文件设置动画 默认情况下 它可以使用 svg 函数实现出色的动画效果 例如
  • 为范围旋钮 ionic-range 添加边框颜色

    我正在使用离子范围添加范围滑块 并想向范围旋钮添加边框 由于它的 ionic4 和范围旋钮是 Shadow dom 的一部分 我无法使用范围旋钮的 border 属性直接更改边框 我已附上我想要实现的图像 范围旋钮周围有白色边框 现有属性只

随机推荐

  • 无法从 docker 将 RabbitMQ 连接到我的应用程序 [重复]

    这个问题在这里已经有答案了 我目前被这个问题困扰了大约一周 确实找不到合适的解决方案 问题是 当我尝试连接到 dockerized RabbitMQ 时 它每次都会给出相同的错误 wordofthedayapp wordofthedayap
  • 在 MongoDB 中维护文档的自定义顺序/排序

    在我的网络应用程序 XY 中 我向用户展示了一个经典的数据 文档 列表 表格 虽然 MongoDB 和 Mongoose 我使用 Mongoose 提供的所有排序功能对我来说都非常清楚 但我对按日期或字母顺序排序不感兴趣 就我而言 让用户维
  • C# 中未捕获未处理的异常

    我使用以下代码来处理程序中所有未处理的异常 但问题是异常没有传播到指定的方法 STAThread static void Main AppDomain currentDomain default AppDomain currentDomai
  • 黑莓中两个不同版本(4.6、4.7 和 5.0+ 以上)的一个构建

    我想导入黑莓 5 0 及更高版本的 facebook 库 但不想导入 4 6 和 4 7 的这些库 我尝试通过以下链接使用 4 7 及更高版本的预处理器 http smartfone more blogspot in 2010 05 cod
  • Tkinter 中的 matplotlib 画布上的光标

    我正在使用 Tkinter 模块在 Python 上编写 GUI 包 并通过使用 matplotlib图画布TkAgg显示一些图形数据 我还想通过以下方式与数据的视觉表示进行交互画布 mpl connect方法 一切都工作得很好 但我对默认
  • 查找具有给定 RGB 颜色的像素

    我想在 Python 中获取具有给定 RGB 颜色的像素的所有坐标 这是我正在使用的代码 但它不起作用 我想找到所有黄色像素 from PIL import Image def find rgb imagename r query g qu
  • PHPUnit 打印测试执行时间

    有没有办法用 PHPUnit 打印每个测试的执行时间 只需添加 log junit my tests log xml 然后使用电子表格应用程序 Excel Numbers Calc 打开此文件进行查看 您可以获得所需的所有信息 并且可以按测
  • 如何仅保存自定义元以供审阅数据仅在“预览更改”中查看,而不是前端的实际帖子

    我正在尝试添加自定义元并查看 预览更改 我可以看到更改 但更改也适用于前端的实际帖子 我希望更改将在发布或更新时更新到实际帖子 而不是在 预览更改 单击时更新 请帮忙 我已经关注了这个插件 函数 my plugin save post po
  • Cognito - error_description 用户名属性映射

    我已在 Amazon Cognito 中配置了一个用户池 以便能够登录 注册用户 并将 facebook 设置为身份提供商 在我的托管用户界面上 我可以成功单击 继续使用 facebook 但在重定向到 return uri 后 显示以下错
  • URLSession.shared.dataTask接收数据的正确方法

    再会 我在尝试找到检查从 dataTask 接收到的 数据 响应 错误 并进行一些特殊错误处理时的正确顺序时有点困惑 通常我们的 URLSession 看起来像这样 class HTTPRequest static func request
  • 在 Windows 上从源代码编译 RCurl

    由于没有 Windows 二进制文件v1 95 4 3然而 我需要安装 编译RCurl http cran r project org web packages RCurl index htmlWindows 8 1 上的源代码包 64 位
  • 动态添加/删除页眉和页脚

    我需要能够添加和删除页眉和页脚ListView动态地 所以我用页眉和页脚初始化我的活动 然后在某个时候我想隐藏它们 后来我需要添加以前的页眉和页脚 并保持相同Adapter 所以我找到了这个解决方案 但它很难看 我真的希望还有其他方法 基本
  • 从路径中获取文件名

    从路径获取文件名的最简单方法是什么 string filename C MyDirectory MyFile bat 在这个例子中 我应该得到 MyFile 没有扩展名 该任务相当简单 因为基本文件名只是从文件夹最后一个分隔符开始的字符串的
  • Ruby - 如何将消息长度表示为 2 个二进制字节

    我正在使用 Ruby 并且正在与一个网络端点进行通信 该端点需要在发送消息本身之前格式化 标头 标头中的第一个字段必须是消息长度 它被定义为网络字节顺序中的 2 个二进制字节消息长度 例如 我的消息长度是1024 如何将 1024 表示为二
  • 使用 group_by 完成列并完成

    我在使用 dplyr 时遇到了一些问题group by功能 执行此操作后 datasetALL gt group by YEAR Region gt summarise count number n 这是结果 YEAR Region cou
  • addEventListener 仅在页面刷新时工作?

    我正在修改两个下拉列表的外观 这里没有问题 一切都很好 唯一的问题是addEventListener该方法仅在页面刷新时有效 如何使此代码在页面加载时工作而无需点击刷新按钮 window addEventListener load func
  • 输入中每 4 个字符后插入破折号

    我想在输入中每四个字符后插入一个破折号 我有一个信用卡输入框 当用户输入并到达每个第 4 个字符时 jQuery 将插入一个连字符 例如 1234 5678 1234 1231 UPDATE 我正在尝试一些代码 我认为我非常接近正确的代码
  • 具有模糊轮廓的单张多边形

    我正在寻找一种方法来获得传单多边形的模糊 模糊 渐变轮廓 这应该有助于使国家 地区轮廓更加简单 目前 当您放大代表国家 地区的 svg 时 它会变得丑陋 不准确 我正在考虑将 CSS 属性附加到 svg 上 类似于这样 http www w
  • 计算组平均值,同时排除每个案例的个体值

    我有一个包含 70 个案例 研究参与者 的数据集 是否有一个函数可以计算这 70 个案例的平均值 以便分析中不包含每个单独的案例 这看起来像 mean for case x value 1 value n value x n 任何信息都会有
  • CSS 100% 宽度,每 20px 步长

    是否可以在纯CSS中设置一些宽度变化的步骤 假设我的 div 宽度为 100 所以当容器为 30px 时 它的宽度将为 30px 但是是否可以将一些 跳跃 设置为 20px 这样当容器为 30px 时 它仍然是 20px 但是当容器为 40