图像的 HTML/CSS 图像网格排列

Question

我正在使用 HTML 和 CSS 制作一个网站，我开始创建一个包含 9 个不同尺寸图像的部分。在我制作了所有不同的尺寸并将它们插入网站后，结果并没有达到我想要的效果。我希望它会变成这样: Image of grid I was hoping for

section {
  background-color: black;
  width: 1346px;
  height: 400px;
  float: left;
}

<section>
  <img src="http://s30.postimg.org/njfrtgaoh/300x200.png" align="top-right" alt="" />
  <img src="http://s11.postimg.org/v0d12pcyr/200x100_2.png" align="top" alt="" />
  <img src="http://s22.postimg.org/s8jfeeiep/500x400.png" align="top-right" alt="" />
  <img src="http://s22.postimg.org/uxiti6d9t/200x200_2.png" align="top-right" alt="" />
  <img src="http://s13.postimg.org/463k9fm8j/146x100.png" align="top" alt="" />
  <img src="http://s14.postimg.org/prasnic9d/200x100.png" align="top" alt="" />
  <img src="http://s30.postimg.org/hz3aitbtd/500x200.png" align="top-right" alt="" />
  <img src="http://s8.postimg.org/56vmkw3kl/200x200.png" align="top-right" alt="" />
  <img src="http://s23.postimg.org/670g2cmaz/146x300.png" align="top" alt="" />
</section>

对于图像，您必须查看并成像，但要向右一点，以便适合。

Answer 1

你必须考虑使用 Masonry.js .
看看这个例子:http://codepen.io/desandro/pen/vLeBLV

<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script>