CSS 100%宽度,每20px步长

Question

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

让我说我有100%的宽度,所以当容器是30px时,它将是30px宽.但是有可能设置一些"跳跃"到20px所以当容器是30px时,它仍然是20px,但是当容器是40px时,它将获得40px,因为40是20的倍数？

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

Answer 1

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

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

它将 max-width css prop 设置为最大可能宽度，即“step”的乘积，并且 <= 实际宽度。