抖动子元素的尺寸以填充父元素答案

【问题标题】：Dithering child elements' dimensions to fill a parent element抖动子元素的尺寸以填充父元素
【发布时间】：2011-06-29 22:05:22
【问题描述】：

假设我有一个宽度为 500 像素的父 div。它有 13 个子元素，应该填满它的宽度。

如果我给每个子元素一个 500 / 13 = 38.46... 像素的宽度，浏览器将限制像素值，所以我最终得到 13 个元素，总共占用 38 * 13 = 494 像素。父 div 右侧会有 6 个像素未填充。

有没有一种简单的方法来抖动子元素的宽度，使剩余部分（6 像素）分布在一些子元素中，从而使总宽度达到 500 像素？

如果我必须手动进行计算并且无法让浏览器管理它，那么在这种情况下我可以使用什么dithering algorithm？

编辑： 澄清一下——我正在使用 JavaScript 在客户端进行这些计算。此外，父 div 的大小和子 div 的数量在运行时会有所不同；上面的数字只是一个例子。

【问题讨论】：

"the browser will floor the pixel values" - 事实并非如此。 Different browsers behave differently.
如果您自己进行计算，我认为您仅限于 JavaScript（用于客户端修改）；使用 JavaScript 的解决方案是否可以接受（如果可以，请标记“javascript”）？或者您更喜欢服务器端解决方案（如果是，请使用您选择的服务器端语言进行标记）？
呵呵，即使有百分比，仍然有剩余空间：jsfiddle.net/apt2S
感谢您的澄清，三十点。我最近一直在使用基于 WebKit 的浏览器，所以这就是我对地板的观察的来源。

标签： javascript html css rounding dithering

【解决方案1】：

我建议你自己用整数数学来做所有事情。然后，您可以计算不均匀的数量，然后决定如何在元素之间分配它。我的假设是，分配额外像素最不引人注意的方法是让尽可能多的宽度相同的元素彼此相邻。

这样做的一种方法是计算你有多少额外的像素 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/

【讨论】：