在$(window)上分隔div.调整大小

Question

我正试图在一个".elements"div的内部均匀地水平放置一个可变数量的".wapper"div。

.包装器是position: relative和float: left

.元素是position: absolute

我用来分隔".wapper"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
});
});

这应该使.wrapperdiv的间隔均匀。但只有在非常特殊的情况下，它们才会在.elements包装器div中均匀分布。大多数时候，它们似乎向左移动。

我所拥有的：

-几个div彼此均匀分布-div彼此距离接近一个像素(或更近？)

我想要什么：

-几个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

将25添加到您的marginSize:

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

这就是你想要的吗？

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

Answer 3

为什么不给".elements"div指定一个最小宽度(px)？