css ширина интервал

Question

Хорошо, вот проблема, с которой я никогда не сталкивался. Я хотел бы использовать CSS, чтобы указать, что ширина элементов всегда должна быть в 10 пиксельных интервалах. Так, например, если ширина элемента равна 11, он будет набираться до 20, 56 => 60, 138 => 140 и т. Д.

Я сомневаюсь, что у CSS есть способ сделать это, но думал, что я все равно спрошу. Нечто подобное было бы хорошо:

div { width-interval: 10px; } 

Answer 1

CSS не имеет такое свойства, но вы в состоянии ширина стиля элементов с дополнительным JavaScript, такие как:

<script type="text/javascript"> 
$(function(){ 
    var widthInterval = 20; 
    $('div').each(function(){ 
     var $this = $(this); 
     var divisions = parseInt($this.width()/widthInterval) + 1; 
     var resWidth = (divisions * widthInterval) + "px"; 
     $this.css('width', resWidth); 
     console.log("Resulted width: " + resWidth); 
    }); 
});  
</script> 

Надеется, что это помогает.

Answer 2

Проблема с этим состоит в том, что блочные элементы всегда размер окна, если не указано иное. Когда вы укажете более конкретную ширину, вам не понадобится ширина в дюймах.

Эти два случая были бы разными;

1. Если элемент уровня блока термоусадки (в случае поплавков и инлайн-блоки)

2. Если элемент имеет относительную ширину, то есть в процентах.

Но если вы устанавливаете его соотнесение, вам не нужно будет интервалы, потому что он должен быть по отношению к другим вещам на странице, так что бы получить сложнее, когда другие вещи должны были быть скорректированы в компенсировать. Например, если у меня было две дивы:

<div id="one"></div> 
<div id="two"></div> 

и правила:

#one { 
width: 50%; 
width-interval: 25px; 
} 

#two { 
width: 50%; 
width-interval: 27px; 
} 

Какой один выигрывает? Если это важно для выравнивания изображений или текста, вы, вероятно, не хотите либо превзойти другого, но не можете игнорировать оба.

Я думаю, что идея хорошая, но, вероятно, лучше обработать javascript, так как вы требуете, чтобы она была динамичной и основывалась на «ближайшем» интервале. Это может работать:

$(function() { 

$(div).each(function() { 
    var cur_width = $(this).width(); 
    var inverval_diff = cur_width % 10; 
    $(this).width(cur_width + inverval_diff); 
}); 

}); 

выше в JQuery, в случае, если вы не используете его в качестве основы JS.