javascript - $(window).resize で div の間隔を空ける

Question

「.elements」div内に可変数の「.wrapper」divを水平方向に均等に配置しようとしています。

.wrapperposition: relativeはfloat: left

.elements はposition: absolute

「.wrapper」divの間隔を空けるために使用している関数は次のとおりです。

$(window).resize(function() { //on resize we...
    x = $('.elements').width(); //new width means new x
    y = Math.floor(x / pane); //new x means new y
    marginSize = (x - (pane * y)) / (2 * y); //set margineSize with new params
    $('.wrapper').css({
        'margin-left': marginSize,
        //change left margin on resize
    });
});

これにより、.wrapper div が均等に配置されます。しかし、非常に特殊な状況でのみ、.elements ラッパー div 内で等間隔に配置されます。ほとんどの場合、それらは左にシフトしているように見えます。

私が持っているもの：

-いくつかの div が互いに均等に分散されている -div が互いに 1 ピクセルほど近く (またはより近く?) 離れている

私が欲しいもの：

-複数の div が互いに均等に広がり、別の div 内に均等に収まる -div 同士の最小距離は 25px のまま

これは、私が話していることの動作するjsfiddleバージョンです。出力のサイズを変更して、私の意味を確認してください。

私の説明が理にかなっていることを願っています。説明や追加が必要な場合はお知らせください。（これが私の最初の質問です...）

Answer 1

マージンを左右に分割し、保持コンテナー (#holder) を中央に配置して、コンテナー間に常に等しいスペースがあることを確認しました。

$(window).resize(function() {
    x=$('.elements').width();
    y=Math.floor(x/pane);
    marginSize=(x-(pane*y))/(2*y);
    $('#holder').css({width:(pane*y)+(marginSize*y)});
    $('.wrapper').css({
        'margin-right':marginSize/2,
        'margin-left':marginSize/2
    });
});

ここで私のソリューションを見つけることができます: http://jsfiddle.net/axelmichel/jnmWE/。
さらに、コンテナーに境界線を追加して、25px / 50px の最小スペースをエミュレートします。境界線を使用できない別の背景がある場合は、最小スペースを含むネストされた div を使用できます。

Answer 2

marginSize に 25 を追加します。

marginSize=(x-(pane*y))/(2*y)+25; //Sets marginSize

それはあなたが望むものですか？

http://jsfiddle.net/muffls/thZgT/

Answer 3

「.elements」divにピクセル単位の最小幅を割り当ててみませんか？