Question

我有一组想要以阶梯式方式放置的图像，如下所示：

img img img img

我希望图像重叠，我现在正在使用虚假定位。你可以在这里看到一个例子： http://jsfiddle.net/2PSFC/

我想在第一个img之后为每个img添加40px的margin-top和margin-left。你可以看到：nth-child似乎没有工作，但无论如何我更喜欢用jquery添加边距。任何想法？

Answer 1

如果没有太多元素，我建议不要使用jQuery。要修复你的CSS，请执行以下操作：

.container:nth-child(2) .stuff { margin-left: 40px; margin-top: 40px; }

由于每个具有类.stuff的元素都包含在容器div中，因此它将是第一个也是唯一的子元素，但容器div具有不同的子索引。

jQuery解决方案：http://jsfiddle.net/WKE4n/

Answer 2

如果您不知道图像的数量，可以使用jQuery动态设置边距：

$('.stuff').css('margin-top', function(i) { return i * 40; })
           .css('margin-left', function(i) { return i * 40; });

或者

$('.stuff').each(function(i) {
    $(this).css({ 'margin-top': i * 40, 'margin-left': i * 40 }); 
});

Here's a fiddle

Answer 3

包含一个答案，用于将父元素中的图像堆栈居中，这是另一个答案的评论：

$('.stuff')
  .css('margin-top', function(i) { return i * 40; })
  .css('margin-left', function(i) { return i * 40; });
$('.wrapper').css('left',($('.wrapper').parent().width() / 2) - ($('.stuff').length * 20) - ($('.stuff').width() / 2));

JSFiddle

我确定有某种方法可以清理那第二条＆＃34;线＆＃34; JS（以图像堆栈为中心的那个），但我不能为我的生活想到它。

使用jquery增加边距

3 个答案:

Here's a fiddle