css - CSS 幅 100%、20px あたりのステップ数

Question

純粋なcssで、幅を変更していくつかのステップを設定することは可能ですか?

100% 幅の div があるとしましょう。したがって、コンテナーが 30px の場合、幅は 30px になります。しかし、コンテナが 30px の場合は 20px のままですが、コンテナが 40px の場合は 40 が 20 の倍数であるため、40px になるように「ジャンプ」を 20px に設定することは可能ですか?

言い換えれば、要素の幅を強制的に整数の倍数に制限します。

Answer 1

私はJSでそれをやったが、いくつかのcssソリューションと混ぜ合わせた:

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

max-width css prop を、'step' の倍数で <= 実際の幅である最大可能幅に設定します。