Размеры дочерних элементов для заполнения родительского элемента - PullRequest
Новая
       29

Размеры дочерних элементов для заполнения родительского элемента

0 голосов
/ 30 июня 2011

Скажем, у меня есть родительский div с шириной 500px. Он имеет 13 дочерних элементов, которые должны заполнить его ширину.

Если я назначу каждому дочернему элементу ширину 500/13 = 38,46 ... пикселей, браузер установит значения пикселей, так что в итоге я получу 13 элементов, которые занимают в общей сложности 38 * 13 = 494 пикселей. В правой части родительского div будет 6 пикселей, которые не заполнены.

Существует ли простой способ размывания ширины дочерних элементов, чтобы остаток (6 пикселей) распределялся между некоторыми дочерними элементами, в результате чего общая ширина составляла 500 пикселей?

Если мне придется выполнять расчеты вручную, и нет никакого способа заставить браузер управлять им, какой алгоритм дизеринга можно использовать в этом случае?

РЕДАКТИРОВАТЬ: Уточнение - я делаю эти вычисления на стороне клиента с использованием JavaScript. Кроме того, размер родительского элемента div и количество дочерних элементов div изменяются во время выполнения; приведенные выше цифры являются лишь примером.

1 Ответ

0 голосов
/ 30 июня 2011

Я бы посоветовал вам сделать все с помощью целочисленной математики самостоятельно.Затем вы можете рассчитать, что такое неравномерное количество, а затем решить, как вы хотите распределить его по элементам.Я предполагаю, что наименее заметным способом распределения дополнительных пикселей было бы сохранение как можно большего количества элементов ширины рядом друг с другом.

Один из способов сделать это - вычислить, сколько дополнительных пикселей N у вас естьа затем просто дайте каждому N элементов, начиная с левого, один дополнительный пиксель.Если вас беспокоит то, что объекты не центрированы, вы можете выделить первый дополнительный пиксель для крайнего левого объекта, второй дополнительный пиксель для дальнего правого, третий дополнительный пиксель для 2-го слева, четвертый дополнительный пиксель из 2-го отправильно, и так далее ... Это будет иметь еще одну границу между объектами разной ширины, но будет более симметричным, чем первый алгоритм.

Вот некоторый код, который показывает, как можно разместить дополнительные пиксели на конечных элементах извнев: 

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/

...