How to align images side by side as well as vertically without gaps?

Question

So I'm trying to align some images side by side without have gaps vertically. Each image width is 20% of the page (5 per a row), and the height varies between the images.

Is there any way of aligning them vertically as well (so that each image is directly below the one above it without a gap, as because of the random heights, all images on a row start where the photo with the largest height above ends)?

css for the photo

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

the photo

   <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 for it

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

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

Answer 2

您会看到示例here

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