CSS 100％宽度，步长每20px [英] CSS 100% width with steps per 20px

问题描述

有可能在纯CSS中设置一些步骤与宽度更改吗？

Is it possible in pure css to set some steps with width changing?

假设我有div 100％的宽度，所以当容器是30px宽度为30px。但是可以设置一些jump到20px，所以当容器是30px时，它仍然是20px，但是当容器是40px时，它将获得40px，因为40是20的倍数？

Lets say I've got div 100% width, so when container is 30px it will be 30px wide to. But is it possible to set some 'jump' to 20px so when container is 30px, it will be still 20px, but when container is 40px, it will get then 40px as 40 is multiple of 20?

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

In other words - force some element's width to be limited to multiple of some integer.

推荐答案

在JS中做，但我已经混合了一些CSS解决方案：

I've done it in JS, but I've mixed it with some css solution:

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

它将max-width css prop设置为最大可能宽度，步骤，并且<=实际宽度。

It sets max-width css prop to maximum possible width that is multiply of 'step' and is <= actual width.

这篇关于CSS 100％宽度，步长每20px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！