1

这是关于具有不同图像大小且没有边距/填充的响应式图片库网站。我的问题是 .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>'

这个的输出将是

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

正常大小和 CSS 下面

图片1 | 图像 2 | 图像3

图片4 | 图像 5 | img6

.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

图片1 | img2

图片4 | 图像5

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

断点 2 和 CSS

图像1

img4

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

在断点 2 之后，只会显示 2 张图像。我用过显示：块；和浮动：左；以前，但图像有时会垂直堆叠，因为它们的大小不同。正确的方法应该是什么？想看实物的给我留言。先感谢您。

4

1 回答 1

1

添加display:inline-block而不是display:table-cell在您的CSS中。

于 2013-10-28T09:21:30.693 回答