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>

Answer 2

你可以从我为你做的这个小提琴开始工作：https://jsfiddle.net/vc7tdpzz/

/src/main/resources

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

2 个答案: