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

Question

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

如果我为每个子元素指定宽度 500 / 13 = 38.46... 像素，则浏览器将对像素值进行底线处理，因此最终会得到 13 个元素，总共占用 38 * 13 = 494 像素。父 div 右侧将有 6 个像素未填充。

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

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

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

Answer 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/