1

我试图在“.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 彼此均匀分布 - div 彼此接近一个像素（或更接近？）

我想要的是：

- 几个 div 彼此均匀分布以均匀地放入另一个 div -div 彼此之间保持 25px 的最小距离

这是我正在谈论的工作的 jsfiddle 版本。调整输出大小以了解我的意思。

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

4

3 回答 3

1

将 25 添加到您的 marginSize：

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

这就是你想要的吗？

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

于 2012-12-18T19:12:32.553 回答
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。

于 2012-12-19T07:10:01.757 回答
0

为什么不为“.elements” div 分配以 px 为单位的最小宽度？

于 2012-12-18T12:58:00.747 回答