0

幅500pxの親divがあるとします。幅を満たす必要がある13の子要素があります。

各子要素に500/13=38.46 ...ピクセルの幅を指定すると、ブラウザーはピクセル値をフロア化するため、合計38 * 13=494ピクセルを占める13個の要素になります。親divの右側には、塗りつぶされていない6つのピクセルがあります。

残り（6ピクセル）がいくつかの子要素に分散され、合計幅が500ピクセルになるように、子要素の幅をディザリングする簡単な方法はありますか？

手動で計算を行う必要があり、ブラウザで計算を管理する方法がない場合、この場合、どのディザリング アルゴリズムを使用できますか？

編集：説明-私はJavaScriptを使用してクライアント側でこれらの計算を行っています。また、親divのサイズと子divの数は、実行時に異なります。上記の図は単なる例です。

4

1 に答える 1

0

整数演算ですべてを自分で行うことをお勧めします。次に、不均一な量を計算し、それを要素全体にどのように配分するかを決定できます。私の推測では、余分なピクセルを分散するための最も目立たない方法は、できるだけ多くの同じ幅の要素を隣り合わせに保つことです。

これを行う1つの方法は、余分なピクセルNの数を計算し、左から1つの余分なピクセルを各N要素に与えることです。中央に配置されていないことが心配な場合は、最初の追加ピクセルを左端のオブジェクトに、2番目の追加ピクセルを右端に、3番目の追加ピクセルを左から2番目に、4番目の追加ピクセルを2番目のオブジェクトに割り当てることができます。右など...これは、異なる幅のオブジェクト間にもう1つの境界がありますが、最初のアルゴリズムよりも対称的です。

これは、外側から端の要素に余分なピクセルを配置する方法を示すコードです。

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 に答える