0

我有这个 html 标记：

<div>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

和一些CSS：

div {
  position: relative; 
}

figure {
  position: absolute;
  top: 0; left: 0;
}

现在，我要做的是推到一边，以便每个元素彼此分开排列，所以当第一个元素的边距为 0 到第二个的边距为 100px 时，第二个的边距为 100px，第三个将有 200px 的边距；

和 jQuery：

var circle = $('figure'),
    f_circle = content_container.find(circle).first(),
    n_circle = f_circle.next();

    var circle_width = circle.width();

        var circle_separate = function(){
            n_circle = f_circle;
            for(var i=0; i< options.elements_number; i++) {
                n_circle.each(function(){
                    $(this).css({
                        'margin-left': +circle_width * (options.elements_number -2) + 10 * (options.elements_number - 2) + 'px'
                    });
                })
            }
        }

如果我有 3 个以上的元素表现得更相似，那么 last 会避开 before last。

在输出中有这个： 在此处输入图像描述 谢谢帮助。

4

2 回答 2

1

;您可以使用jQuery.each()它们来循环浏览它们，该each功能为您提供当前元素在数组中的位置，您只需将其乘以所需的宽度

var circle = $('figure');
var circle_width = circle.width();

var circle_separate = function(){
    circle.each(function(idx){
        $(this).css('margin-left',(idx * (circle_width +10))+'px');    
    })
}
于 2013-05-06T11:02:31.293 回答
0

您可以通过多种方式做到这一点，您可以使用 CSS 或 javascript 来做到这一点。

在您的代码中，图形元素是位置：绝对，而边距在绝对元素中无关紧要，因为它们可以使用 top 和 left 放置在 div 内的任何位置，并且它们不会影响它们之前或之后的元素。

尝试像这样编写你的CSS：

div {
    position: relative;
}

figure {
    position: relative;
    display: inline-block;
}

如果你愿意，你可以在 CSS 中指定单独的边距，如下所示：

figure:first-child { margin-right: 10px; }
figure:nth-child(2) { margin-right: 30px; }
figure:nth-child(3) { margin-right: 50px; }

如果您想使用 jquery 来执行此操作并将它们作为绝对值，您可以使用 jquery 的 each() 函数

我会做这样的事情（因为你不能在指定了 top/left 的绝对元素中使用边距）：

var prevLeft = 0;
var prevWidth = 0;
$("figure").each(function(idx, elem){
    var $this = $(this);

    $this.css({ left: prevLeft+prevWidth+10 });

    prevLeft = $this.offset().left;
    prevWidth = $this.width();
});
于 2013-05-06T11:17:30.167 回答