0

私はこのhtmlマークアップを持っています:

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

およびいくつかの CSS:

div {
  position: relative; 
}

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

今、私がやろうとしているのは、各要素が互いに別々に配置されるように押しのけることです。そのため、最初のマージンが 0 の場合、2 番目のマージンは 100px になり、2 番目のマージンは 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 つ以上ある場合、最後は最後より前を避けます。

これを出力に含めるには: ここに画像の説明を入力 Thx for help.

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 を使用して行うことができます。

コードでは、図の要素は position: absolute であり、絶対要素ではマージンは重要ではありません。これは、上と左を使用して 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() 関数を使用できます。

私は次のようにします（上/左が指定された絶対要素ではマージンを使用できないため）：

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 に答える