抖动子元素的尺寸来填充父元素

说我有一个宽度为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

抖动子元素的尺寸来填充父元素

回答

相关问题