javascript - 在 $(window).resize 上分隔 div

Question

我正在尝试在“.elements”div 内水平放置可变数量的“.wrapper”div。

.wrapper 是position: 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 彼此均匀分布 -divs 彼此接近一个像素(或更近？)

我想要的:

- 多个 div 彼此均匀分布以均匀地适合另一个 div -divs 之间保持最小 25px 的距离

这是一个working jsfiddle version我在说什么。调整输出大小以了解我的意思。

我希望我的解释是有道理的。如果需要任何澄清或补充，请告诉我。 (这是我的第一个问题...)

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。