css - 在 Parent 中级联一堆 div？

Question

有没有办法使用 CSS 进行级联(不是 this cascade，而是将 div 定位在其父级中，请参见下面的代码)？我知道您可以使用 JS(尤其是使用函数 Masonry )，但我可以用纯 CSS 来实现吗？

我正在尝试使 .child div 像下图一样与我给它们的边距对齐，但结果如下图所示。

我正在尝试修复下图中指定的差距。

最底部的最后一张图片(第 4 个 .child div)似乎与右边的第二张图片(第 3 个 .child div)垂直对齐，怎么会我只用 CSS 来阻止它。

.parent {
  position: absolute;
  width: 100%;
  height: 100%;
}
.child {
  position: relative;
  float: left;
  margin: 5px;
  width: 40%;
}
.child img {
  width: 100%;
}

<div class="parent">
  <div class="child">
    <img src="http://coolwildlife.com/wp-content/uploads/galleries/post-1593/Brown%20Bear%20Picture%20001.jpg">
  </div>
  <div class="child">
    <img src="http://xyer.co/wallpaper/6/3/nature-wallpaper-background-hd.jpg">
  </div>
  <div class="child">
    <img src="http://xyer.co/wallpaper/6/3/nature-wallpaper-background-hd.jpg">
  </div>
  <div class="child">
    <img src="http://xyer.co/wallpaper/6/3/nature-wallpaper-background-hd.jpg">
  </div>
</div>

Answer 1

解决此类问题的最直接的纯 CSS 方法是在列中垂直显示图像，然后水平显示列:

.parent {
position: absolute;
width: 1020px;
}

.column {
float: left;
width: 510px;
height: 100vh;
}

.child {
position: relative;
margin: 5px;
background-color: rgb(0,0,0);
}

<div class="parent">

<div class="column">
<div class="child"><img src="pic1" width="500px" height="500px"></div>
<div class="child"><img src="pic2" width="500px" height="200px"></div>
<div class="child"><img src="pic3" width="500px" height="200px"></div>
<div class="child"><img src="pic4" width="500px" height="500px"></div>
<div class="child"><img src="pic5" width="500px" height="200px"></div>
</div>

<div class="column">
<div class="child"><img src="pic6" width="500px" height="200px"></div>
<div class="child"><img src="pic7" width="500px" height="200px"></div>
<div class="child"><img src="pic8" width="500px" height="200px"></div>
<div class="child"><img src="pic9" width="500px" height="500px"></div>
<div class="child"><img src="pic10" width="500px" height="500px"></div>
</div>

</div>