Html CSS显示表在媒体查询断点处调整大小时隐藏其他单元格

这是关于具有不同图像大小且无边距/填充的响应图像库网站。我的问题是.showcase类在调整大小时隐藏在@media断点处，但我想显示所有图像

HTML

<a href="album.php?album_id=' . $row['album_id'] . '" class = "showcase" >
<img src = "' . $row['album_thumb'] . '">
<div class="label-container">
<h3 class = "title">' . $row['album_title'] . '</h3>
<p class = "desc"> ' . $row['album_desc'] . '</p>
</div>
</a>'

断点1和CSS

img1 | img2

img4 | img5

@仅介质屏幕和（最大宽度：767px）{ .展示{ 宽度：50%；}

断点2和CSS

img1

img4

@仅介质屏幕和（最大宽度：480px）{ .展示{ 宽度：100%； }}

---

在断点2之后，仅显示2个图像。我使用了display:block；和浮动：左；以前，但图像有时会垂直堆叠，因为它们的大小不同。对此，正确的方法应该是什么？如果你想看到真实的东西，请给我留言。提前感谢。

在css中添加

display:inline block

而不是

display:table cell

。

在css中添加

display:inline block

而不是

display:table cell

。

在css中添加'display:inline block'而不是'display:table-cell'add'显示：inline block'而不是'display:table cell'

<div class="row">
<a class="showcase">...</a>
<a class="showcase">...</a>
<a class="showcase">...</a>
</div>

.content{
    width:100%;
    display:table;
}
.row{
    display:table-row;
}
 .showcase{

 display:table-cell;
 position: relative;
 width:33.333333%;     background-color: #000;
 vertical-align: middle; 
 }