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

這樣做的問題是塊級別的元素始終是窗口的大小，除非您另有指定。一旦你指定了更具體的寬度，你不需要寬度inverval。

這兩種情況會有所不同的是;

1. 如果塊級元素被收縮包裝（在浮子和直列塊的情況下）

2. 如果元件具有相對的寬度，即一個百分比。

但如果你將其設定爲相對的，你就不需要間隔，因爲它應該是相對於頁面上的其他東西，這樣就會變得複雜，當其他的事情不得不進行調整，以補償。舉例來說，如果我有兩個div：

<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框架。