CSS 100% Breite mit Schritten pro 20px

Question

Ist es in reinem CSS möglich, einige Schritte mit Breitenänderung zu setzen?

Lets sagen, ich habe div 100% Breite, so wenn Container ist 30px wird es 30px breit zu sein. Aber ist es möglich, einen 'Sprung' zu 20px zu setzen, wenn der Container also 30px ist, ist es immer noch 20px, aber wenn der Container 40px ist, wird er 40px bekommen, da 40 ein Vielfaches von 20 ist?

Mit anderen Worten - erzwingen, dass die Breite eines Elements auf ein Vielfaches einer ganzen Zahl begrenzt wird.

Answer 1

Ich habe es in JS getan, aber ich habe es mit einigen CSS-Lösung gemischt:

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

Es max-width css prop maximal mögliche Breite festgelegt, die mehrfach von ‚Stufe‘ und ist < = tatsächliche Breite.