在 css 中，我如何定位图像列表，以便每个图像都位于其前一个兄弟图像的右侧和下方？

Question

我有以下模型html：

<img />
<img />
<img />
<img />

我希望每张图片都位于上一张图片下方 10px 和右侧 10px 的位置。它需要看起来像 https://jsfiddle.net/f0c429sq/1/.

中的结果

我设法在那个 jsfiddle link 中获得了正确的结果，方法是让每个 img 嵌套得更深，并使用 position: absolute，如下所示。

<div>
    <img />
    <div>
        <img />
        <div>
            <img />
            <div>
                <img />
            </div>
        </div>
    </div>
</div>

但这真的很难看，而且在我的情况下不起作用，因为我正在使用 AngularJS，图像列表将使用 ng-repeat.

感谢任何帮助。

Answer 1

我认为这应该可以，希望这就是您要找的：

<style>
.a { padding-left:10px;margin-left:10px;padding-bottom:10px;margin-bottom:10px;
.b { padding-left:20px;margin-left:20px;padding-bottom:10px;margin-bottom:10px;
.c { padding-left:30px;margin-left:30px;padding-bottom:10px;margin-bottom:10px;
</style>
<img src="1.jpg class="a" /><br>
<img src="2.jpg class="b" /><br>
<img src="3.jpg class="c" /><br>

Answer 2

我想这就是你想要的？

http://jsfiddle.net/rpjyewm8/

<div class="image-stack">
  <img class="image" src="https://placekitten.com/g/200/300">
  <img class="image" src="https://placekitten.com/g/200/300">
  <img class="image" src="https://placekitten.com/g/200/300">
  <img class="image" src="https://placekitten.com/g/200/300">
  <img class="image" src="https://placekitten.com/g/200/300">
</div>

.image-stack .image {
  position: absolute;
  top: 0;
  left: 0;
}

.image-stack .image:nth-child(1) {
  top: 10px;
  left: 10px;
}

.image-stack .image:nth-child(2) {
  top: 20px;
  left: 20px;
}

.image-stack .image:nth-child(3) {
  top: 30px;
  left: 30px;
}

.image-stack .image:nth-child(4) {
  top: 40px;
  left: 40px;
}

.image-stack .image:nth-child(5) {
  top: 50px;
  left: 50px;
}

如果你使用的是Sass，你可以循环执行：

.image-stack {

  .image {
    position: absolute;
    top: 0;
    left: 0;

    @for $image from 1 through 5 {
      &:nth-child(#{$image}) {
        top: ($image * 10) + px;
        left: ($image * 10) + px;
      }
    }
  }
}

在 css 中，我如何定位图像列表，以便每个图像都位于其前一个兄弟图像的右侧和下方？

In css, how do I position a list of images, so that each one is right and down of it's previous sibling?

html

css

position