0

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

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

是否有一种简单的方法来抖动子元素的宽度，以便剩余部分（6 像素）分布在一些子元素中，从而导致总宽度为 500 像素？

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

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

4

1 回答 1

0

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

一种方法是计算你有多少额外的像素 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-30T05:24:27.473 回答