html - 如何并排和垂直对齐图像而没有间隙？

Question

所以我试图并排对齐一些图像，而没有垂直间隙。 每个图像宽度为页面的 20%(每行 5 个)，并且图像之间的高度不同。

有没有什么方法可以垂直对齐它们(这样每个图像都直接在它上面的图像下方没有间隙，因为随机高度，一行中的所有图像都从上方最大高度的照片结束的地方开始)？

照片的CSS

     .photo {width:20%; height:auto;         
        margin: 0;
        padding: 0;
        float:left;
       }

照片

   <img src="" alt="image" style="max-width:100%; max-height:100%;" class="photo">

Answer 1

您可以模拟表格，并为单元格设置 vertical-align:middle;

<div class="table">
    <div class="cell">
        <img src="" alt="image" class="photo">
    </div>
  ...
</div>

和它的CSS

.table{
    display: table;
}
.cell { 
    display: table-cell;
    vertical-align: middle;
}
.photo{
    max-width: 100%;
    max-height: 100%
}

示例 https://jsfiddle.net/nardist01/2f7yd20e/2/