抖動子元素的尺寸來填充父元素

說我有一個寬度爲500px的父div。它有13個子元素應該填滿它的寬度。抖動子元素的尺寸來填充父元素

如果我給每個子元素設置一個500/13 = 38.46 ...像素的寬度，那麼瀏覽器將設置像素值，所以我最終得到13個元素，總共佔用38 * 13 = 494個像素。父div的右側將有6個像素未填充。

是否有一種簡單的方法來抖動子元素的寬度，使剩餘（6像素）分佈在一些子元素中，從而產生500像素的總寬度？

如果我必須手動進行計算，並且無法讓瀏覽器進行管理，那麼在這種情況下我可以使用什麼dithering algorithm？

編輯：澄清 - 我正在使用JavaScript在客戶端進行這些計算。此外，父div的大小和子div的數量在運行時會有所不同;上面的數字只是一個例子。

2011-06-29 kpozin

'「瀏覽器會將像素值設置爲「' - 這是不正確的，因此。 [不同的瀏覽器行爲不同。]（http://stackoverflow.com/questions/5581973/where-do-the-lost-pixels-go-in-a-percent-css-layout/5587820#5587820） – thirtydot

如果你'重新自己做計算，我認爲你只限於JavaScript（用於客戶端修改）; *使用JavaScript的解決方案*是可以接受的（如果是這樣的話請標記'[tag：javascript]'）？或者您更喜歡服務器端解決方案（如果是這樣，請使用您選擇的服務器端語言進行標記）？ –

呵呵，即使百分比還有剩餘空間：http://jsfiddle.net/apt2S/ – Dan

我建議你只是用整數數學自己做。然後，您可以計算不平衡量，然後決定如何在元素中分配它。我的假設是，分配額外像素的最不明顯的方式是儘量保持寬度元素儘可能相鄰。

這樣做的一種方法是計算你有多少額外像素N，然後給每個N元素從左邊的一個額外像素開始。如果您擔心事物未居中，您可以將第一個額外像素分配給最左側的物體，第二個額外像素分配給最右側，第三個額外像素分配到第二個左側，第四個額外像素分配第二個像素右等等......這將在不相似的寬度對象之間有一個邊界，但比第一個算法更對稱。

下面是一些代碼，顯示一個如何能穿上端部件的額外的像素從外面：

function distributeWidth(len, totalWidth) { 
    var results = new Array(len); 
    var coreWidth = Math.floor(totalWidth/len); 
    var extraWidth = totalWidth - (coreWidth * len); 
    var w,s; 
    for (var i = 0; i < len; i++) { 
     w = coreWidth; 
     if (extraWidth > 0) { 
      w++; 
      extraWidth--; 
     } 
     if (i % 2 == 0) { 
      s = i/2;    // even, index from front of array 
     } else { 
      s = len - ((i+1)/2); // odd, index from end of array 
     } 
     results[s] = w; 
    } 
    return(results) 
}

而這裏的提琴，看看它在行動：http://jsfiddle.net/jfriend00/qpFtT/2/

來源

2011-06-30 05:24:27 jfriend00

抖動子元素的尺寸來填充父元素

回答

相關問題