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

在marginSize中添加25：

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

这就是你想要的吗？

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

Answer 2

我将边距分成左右两边，并将保持容器（#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 3

为什么不将px中的最小宽度指定为“.elements”div？

在$（window）.resize上间隔出div

3 个答案: