Html Css网格图像

我想用css创建一个网格布局，以像马赛克一样显示不同高度的图像

<div id="photos">
        <a href="../media/images/0.jpg"><img src="../media/images/0.jpg" alt="Little doggie"></a>
        <img src="../media/images/1.jpg" alt="Little kittie">
        <img src="../media/images/2.jpg" alt="Little kittie">
        <img src="../media/images/3.jpg" alt="Little doggie">
        <img src="../media/images/4.jpg" alt="Little kittie">
        <img src="../media/images/5.jpg" alt="Little kittie">
        <img src="../media/images/6.jpg" alt="Little doggie">
        <img src="../media/images/7.jpg" alt="Little kittie">
        <img src="../media/images/8.jpg" alt="Little kittie">
        <img src="../media/images/9.jpg" alt="Little doggie">
        <img src="../media/images/10.jpg" alt="Little kittie">
        <img src="../media/images/11.jpg" alt="Little kittie">
        <img src="../media/images/12.jpg" alt="Little doggie">
        <img src="../media/images/13.jpg" alt="Little kittie">
        <img src="../media/images/14.jpg" alt="Little kittie">
        <img src="../media/images/15.jpg" alt="Little doggie">
        <img src="../media/images/16.jpg" alt="Little kittie">
        <img src="../media/images/17.jpg" alt="Little kittie">
        <img src="../media/images/18.jpg" alt="Little doggie">
        <img src="../media/images/19.jpg" alt="Little kittie">
        <img src="../media/images/20.jpg" alt="Little kittie">
        <img src="../media/images/21.jpg" alt="Little doggie">
        <img src="../media/images/22.jpg" alt="Little kittie">
        <img src="../media/images/23.jpg" alt="Little kittie">
        <img src="../media/images/24.jpg" alt="Little doggie">
        <img src="../media/images/25.jpg" alt="Little kittie">
        <img src="../media/images/26.jpg" alt="Little kittie">
        <img src="../media/images/27.jpg" alt="Little doggie">
        <img src="../media/images/28.jpg" alt="Little kittie">
        <img src="../media/images/29.jpg" alt="Little kittie">
        <img src="../media/images/30.jpg" alt="Little doggie">
        <img src="../media/images/31.jpg" alt="Little kittie">
        <img src="../media/images/32.jpg" alt="Little kittie">
        <img src="../media/images/33.jpg" alt="Little doggie">
        <img src="../media/images/34.jpg" alt="Little kittie">
        <img src="../media/images/35.jpg" alt="Little kittie">
        <img src="../media/images/36.jpg" alt="Little doggie">
        <img src="../media/images/37.jpg" alt="Little kittie">
        <img src="../media/images/38.jpg" alt="Little kittie">
        <img src="../media/images/39.jpg" alt="Little doggie">
        <img src="../media/images/40.jpg" alt="Little kittie">
        <img src="../media/images/41.jpg" alt="Little kittie">
        <img src="../media/images/42.jpg" alt="Little doggie">
        <img src="../media/images/43.jpg" alt="Little kittie">
        <img src="../media/images/44.jpg" alt="Little kittie">
        <img src="../media/images/45.jpg" alt="Little doggie">                        

    </div>  

但当我在mozilla上运行它时，它将无法工作，而且当图像缩放几次时，它会消失，留下空白区域。有什么不对劲吗？这是检查它的方法：

#photos img {
  /* Just in case there are inline attributes */
  margin-top:4px;
  width: 20% !important;
  height: auto !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  float:left

}

---

您可以查看以下图片拼接的答案：为什么只

浮动：左
？保持简单你的意思是在img元素左边浮动？但它在我的mozilla上仍然不起作用，静态图像在缩放时消失…版本33.0。图像在两种浏览器中缩放时消失。图像大小也不一样。以前从没见过。是否它们在缩放时喜欢重叠？Mozilla显示的图像一个接一个。
#photos img {
  /* Just in case there are inline attributes */
  margin-top:4px;
  width: 20% !important;
  height: auto !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  float:left

}