css - CSS 100% 宽度，每 20 像素步长

Question

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

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

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

Answer 1

我已经在 J​​S 中完成了它，但是我将它与一些 css 解决方案混合在一起：

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

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