抖动子元素的尺寸以填充父元素 [英] Dithering child elements' dimensions to fill a parent element

问题描述

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

Say I have a parent div with width 500px. It has 13 child elements that should fill its width.

如果我给每个子元素的宽度为500/13 = 38.46 ...像素，像素值，所以我最终有13个元素，总共占用了38 * 13 = 494像素。

If I give each child element a width of 500 / 13 = 38.46... pixels, the browser will floor the pixel values, so I end up with 13 elements that take up a total of 38 * 13 = 494 pixels. There will be 6 pixels on the right side of the parent div that are not filled.

有一个简单的方法来抖动子元素的宽度，使剩余的（6像素）分布在一些子元素之间，导致总宽度为500像素？

Is there an easy way to dither the child element widths so that the remainder (6 pixels) is distributed among some of the child elements, resulting in a total width of 500 pixels?

如果我必须手动进行计算，并且没有办法获得浏览器管理它，什么抖动 algorithm 我可以在这种情况下使用吗？

If I have to do the calculations manually and there's no way to get the browser to manage it, what dithering algorithm might I use in this case?

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

A clarification -- I'm doing these calculations on the client side using JavaScript. Also, the size of the parent div and the number of child divs vary at runtime; the figures above are just an example.

推荐答案

我建议你自己做一切与整数数学。然后，您可以计算不均匀的金额，然后决定如何将其分布在元素上。我的假设是，分布额外像素的最不明显的方法是保持尽可能多的相同宽度元素。

I'd suggest you just do everything with integer math yourself. You can then calculate what the uneven amount is and then decide how you want to distribute it across the elements. My supposition is that the least noticeable way to distribute the extra pixels would be to keep as many like width elements next to each other as possible.

这样做的一种方式计算你有多少额外的像素N，然后只是给每个N元素从左边开始一个额外的像素。如果你担心事情不在中心，你可以分配第一个额外的像素到最左边的对象，第二个额外的像素到最右边，第三个额外的像素到第二个从左边，第四个额外的像素从第二个right，etc ...这将在不同宽度对象之间有一个边界，但是比第一个算法更对称。

One way of doing that would to calculate how many extra pixels N you have and then just give each N elements starting from the left one extra pixel. If you were worried about things not being centered, you could allocate the first extra pixel to the far left object, the second extra pixel to the far right, the third extra pixel to the 2nd from left, the fourth extra pixel from the 2nd from right, etc... This would have one more boundary between dissimilar width objects, but be more symmetric than the first algorithm.

这里有一些代码，在外部的额外像素：

Here's some code that shows how one could put the extra pixels on the end elements from outside in:

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/

这篇关于抖动子元素的尺寸以填充父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！