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 步长 的相关文章

  • 如何使用div绘制曲线?

    我需要使用 CSS 绘制两条曲线 我尝试过组装一些divs 使用CSSborder radius绘制弧形面板 但结果很糟糕 还有更好的算术吗 正如我之前在评论中提到的 请不要使用CSS用于实现复杂的曲线和形状 虽然仍然可以使用 CSS 来实
  • 图像下方不需要的边距

    我有一个图像和一个 div 我想将其放置在其下方 这是小提琴 http jsfiddle net d3Mne 1 http jsfiddle net d3Mne 1 问题是两者之间存在差距 此下边距仅出现在图像中 有什么办法可以去除吗 Se
  • 这个 CSS 选择器是什么? [类* =“跨度”]

    我在 Twitter Bootstrap 中看到了这个选择器 show grid class span background color eee text align center border radius 3px min height
  • 响应式 CSS 图像锚点标签 - 图像地图样式

    我一直在开发一个响应式网站 并且在图像映射方面遇到了一些问题 图像映射似乎不适用于基于百分比的坐标 经过一番谷歌搜索后 我发现了一个 JS 解决方法 http mattstow com experiment responsive image
  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w
  • 仅水平 CSS 视差效果,层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w
  • Symfony 2 使用 CSS 设置背景图片

    I want to put a background image for a menu in symfony But I can t figure out how to do it I managed to style a lot of t
  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许
  • 跨浏览器:禁用输入字段的不同行为(文本可以/不能复制)

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试
  • 使用滤镜将css3灰色图像转为蓝色?

    我正在尝试将灰色图像变为更蓝色的色调 真的不知道如何为此设置滤镜或是否可能 该图像只有一种颜色 cacaca 其余部分透明 我正在尝试使用相同的图像进行一些叠加 以便它仅突出显示那些彩色部分而不是透明区域 一直在尝试其中的一些 但没有取得多
  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https
  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • Flexbox 不适用于 iPad 和 Safari [重复]

    这个问题在这里已经有答案了 我在网站上使用 Flexbox 但它在 iPad Air iPad 3 和 Safari PC 上崩溃 设计和代码与此 codepen 类似 http codepen io anon pen xwJzEg htt
  • 垂直对齐复选框标签? [复制]

    这个问题在这里已经有答案了 我有这样的复选框
  • 如何重置使用 JavaScript 更改的 CSS 属性?

    我的导航按钮的宽度从 100px 增加到 150px 当鼠标悬停在 nav li hover width 150px 但是使用 javascript 我已经做到了 无论选择哪个选项 宽度都将继续为 150px 当选择每个选项时 它会使其他选
  • 如何设置菜单按钮和菜单项的样式

    我尝试更改菜单按钮中的样式 我可以更改菜单按钮样式 但不能更改其菜单项 无论我尝试什么 菜单按钮内的菜单项都保持不变 menu button fx background color black menu button label fx ba
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

随机推荐

  • 无法从 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