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

CSS Display table hides other cell when resized at media query breakpoints

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

HTML

1
2
3
4
5
6
7

<img src ="' . $row['album_thumb'] . '">

<h3 class ="title">' . $row['album_title'] . '
<p class ="desc"> ' . $row['album_desc'] . '
</p>

'

其输出将是

1
2
3

...
...
...

正常大小和下面的CSS

img1 | img 2 | img3

img4 | img 5 | img6

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

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

断点1和CSS

img1 | img2

img4 | img5

@media only screen and (max-width: 767px) {
.showcase{
width:50%; } }

断点2和CSS

img1

img4

@media only screen and (max-width: 480px) {
.showcase{
width:100%;
} }

在断点2之后，将只显示2个图像。我曾经使用过display:block；float:left；before，但是图像有时会垂直堆叠，因为它们的大小不同。对此，应该采取什么相应的方法？如果你想看到真实的东西，请给我留言。提前谢谢。