Question

我有这个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个元素表现得更相似，那么最后会在最后一次回避。

在ouptut中有这个： enter image description here 求助。

Answer 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');    
    })
}

Answer 2

您可以通过多种方式执行此操作，您可以使用CSS或使用javascript进行此操作。

在你的代码中，figure元素是position：absolute，margin在绝对元素中无关紧要，因为它们可以使用top和left放在div中的任何位置，并且它们不会影响它们之前或之后的元素。 / p>

尝试像这样编写你的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的绝对元素中使用margin）：

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();
});

如何使用jQuery在CSS中提供独立的值

2 个答案: