CSS 100% szerokość z krokami na 20 pikseli

Question

Czy w czystym css można ustawić kilka kroków ze zmianą szerokości?

Powiedzmy, że mam div 100% szerokości, więc gdy kontener ma 30 pikseli, będzie miał szerokość 30 pikseli. Ale czy możliwe jest ustawienie "przeskoku" na 20px, więc gdy pojemnik ma 30px, to nadal będzie 20px, ale kiedy pojemnik będzie miał 40px, dostanie 40px, a 40 będzie wielokrotnością 20?

Innymi słowy - wymuszenie ograniczenia szerokości niektórych elementów do wielokrotności liczby całkowitej.

Answer 1

Zrobiłem to w JS, ale mam mieszane go z jakiegoś rozwiązania CSS:

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

ustawia max-width css rekwizyt do maksymalnej możliwej szerokości, która jest wielokrotnością „krok” i jest < = rzeczywista szerokość.