在CSS计算函数中使用模数

2024-06-10

有没有办法在CSS calc函数中使用或实现模数运算符?
我知道有 mod 运算符并且 IE 支持它,但是其他浏览器呢?

例如

#element-id{
     width: calc( 100%  mod 5 );
}

不幸的是,没有更多提及mod运算符在最近的规格 http://www.w3.org/TR/css3-values/#calc-notation.

calc() 函数允许使用加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式作为分量值。

您可能需要使用 javascript 来实现此类行为。

var el = document.getElementById('element-id');
el.style.width = (100 % 5) + '%';
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在CSS计算函数中使用模数 的相关文章

  • CSS:缩放更改时两列 Div 布局不对齐

    请参阅 jsFiddlehttp jsfiddle net Lijo ryDnn 1 http jsfiddle net Lijo ryDnn 1 我有两列布局 它是基于 的布局 但定义了最小宽度 当我将 浏览器 IE8 的缩放设置为 75
  • 获取可拖动元素的ID

    有没有办法在原生 HTML5 拖放中获取具有属性的元素的 iddraggable true 起初我认为从可拖动容器中获取 id 是标准做法 但实际上它始终是从您开始拖动的子元素中获取 id 这非常烦人 这是一个小提琴 https jsfid
  • 通过 CSS 转换平滑由 javascript 驱动的快速位置变化?

    我认为这是一个很遥远的事情 但值得一问 我有一些类似于许多移动应用程序 例如 Facebook 中的左侧菜单的东西 当您按下 打开 按钮时 它可以顺利打开 在我的例子中 使用 CSS 过渡 但我还实现了拖出您可以从屏幕左侧滑动以拖出菜单的功
  • Webpack“OTS 解析错误”加载字体

    我的 webpack 配置指定应使用加载字体url loader 当我尝试使用 Chrome 查看该页面时 出现以下错误 OTS parsing error invalid version tag Failed to decode down
  • 如何在 html 和 css 中制作具有保留比例的高度和宽度响应图像?

    类似的问题还有很多 但都没有解决我的需求 应保持纵横比 并且 高度响应 并且 宽度响应 并且 应始终在浏览器窗口中看到完整图像 即响应能力应针对最紧密的尺寸 我已经满足了这些要求 但并不是同时满足所有要求 例如 如果我让下面的代码保持原样h
  • 如何在div内部垂直顶部对齐div?

    我试图在 div 内顶部对齐 div 但没有成功 http jsfiddle net jhbs31xv http jsfiddle net jhbs31xv table style border 1px solid red width 10
  • 将跨度值存储到 JavaScript 变量中

    我正在尝试编写 javascript 它将遍历一个跨度 获取其值 并将其存储在可用于执行算术的变量中 span class ServerData 30 span span class ServerData 6 span 关于以上两行 我的功
  • 如何将列表项与项目符号垂直对齐?

    所以我有一个带有自定义项目符号图像的无序列表 它们是指向列表右侧的三角形 我希望该点与列表项中第一行文本的垂直中心对齐 我怎样才能实现这个目标 这是我目前正在查看的内容 ul li Photography for events and po
  • 如何将浮动列表项居中?

    我的网站导航有需要居中的列表项 我处于浮动状态 以便可以在列表项上进行填充 将它们设置为内联似乎可以消除顶部和底部填充 div ul ul div
  • 我们如何在jquery中添加css+动画?

    这是我正在尝试做的事情的一小段 why red a hover function this animate webkit transform scale 1 1 slow function this animate webkit trans
  • 范围输入拇指随着时间的推移而偏移

    我查遍了 Stackoverflow 似乎所有带有拇指标签的范围滑块都有这个问题 例如 这个答案 https stackoverflow com a 35419875几乎没有 但仍然有 基本上你可以计算value max得到left范围值标
  • 为什么 CSS 重置不使用“*”来覆盖所有元素?

    For example the Meyer reset http meyerweb com eric tools css reset has a long list of elements1 which I believe can be r
  • CSS 底部边框悬停“抖动”

    我有一个导航栏 当您将鼠标悬停在导航按钮上时 我想给它一个橙色的底部边框 唯一的问题是 每当您悬停时 边框都会使内容 导航按钮 抖动 这是不应该的 另外 我的导航栏上已经有一个黑色的底部边框 因此无法更改它 HTML div ul li a
  • 使关闭图像出现在 DIV 的右上角

    我想知道如何使一个小十字 闭合 图像出现在 div 的右上角 使用 CSS 和 XHTML 谢谢 你可以这样做 jsfiddle net 7JEAZ 1317 http jsfiddle net 7JEAZ 1317 代码片段 panel
  • 尝试将星号添加到必填输入字段

    我想我不太明白 before and after因为我无法让这个工作 我只是想在表单中的必填字段后添加一个星号 我的代码很简单
  • Codemirror光标位置偏移

    我正在使用代码镜像在网页中显示 突出显示和编辑 xml 但我遇到了光标位置偏离插入位置的问题 因此 如果从闪烁光标所在的位置删除字符 则删除之前的字符您期望的那个会被删除 我假设它与我当前页面存在 css 冲突 因为它在我的页面之外运行良好
  • 如何在响应式设计中禁用缩放功能?

    在使用 iPad iPhone 和 或其他智能手机时 如何禁用响应式设计页面中的放大和缩小功能 有什么办法可以控制吗 创建 META 视口标签 并设置用户可扩展属性为 否 如下所示 更新的答案
  • 在纯 css3 循环中按顺序对元素进行动画处理

    我正在尝试在完整的 css3 动画中按顺序对元素进行动画处理 似乎非常直接的答案是使用动画延迟 但是我想要这个循环 有什么想法如何使动画无限循环吗 我找到了这个fiddle http jsfiddle net cherryflavourpe
  • Chrome扩展程序自定义光标

    我构建了一个 Google Chrome 扩展程序 在网站中放置一些 IMG 标签 hover 上的此 img 标记必须显示自定义光标 该扩展使用 jQuery 作为其注入的核心脚本 我尝试了以下方法 1 var cursor url ch
  • 带有透明边框的响应式箭头进度条

    我正在尝试构建一个进度条 如结帐中常见的那样 问题是 箭头之间的边界是透明的 整个事情应该是反应灵敏 到目前为止我已经明白了 http codepen io MrBamblele pen rVBeoz http codepen io MrB

随机推荐