html - 移动响应图片库

Question

这只是那些日子中的一个，出于某种原因我陷入了困境。这个想法是画廊将获得页面宽度的 100%，而画廊中的一行将获得 80%。将有三张图像将在每行列中，每列为 33.3%。我希望它们像下图一样显示，但出于某种原因，两行只是彼此相邻显示。

Image of layout 我的代码如下:

.gallery-wrap {
    width: 100%;
    display: flex;
}

@media only screen and (max-width: 500px) {
.gallery-wrap {
    width: 100%;
    display: inline;
}
}

@media only screen and (max-width: 500px) {
.gallery-row {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
}

.gallery-row {
    width: 80%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.gallery-col {
    width: 33.3%;
    float: left;
}

@media only screen and (max-width: 500px) {
.gallery-col {
    width: 100%;
}
}

.gallery-img {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

<div class="gallery-wrap">

<!-- Row 1 Example -->
<div class="gallery-row">

<div class="gallery-col">
<img class="gallery-img " src="https://via.placeholder.com/1500" alt="Gallery image">
</div>

<div class="gallery-col">
<img class="gallery-img " src="https://via.placeholder.com/1500" alt="Gallery image">
</div>

<div class="gallery-col">
<img class="gallery-img " src="https://via.placeholder.com/1500" alt="Gallery image">
</div>
</div>

<!-- Row 2 Example -->
<div class="gallery-row">

<div class="gallery-col">
<img class="gallery-img " src="https://via.placeholder.com/1500" alt="Gallery image">
</div>

<div class="gallery-col">
<img class="gallery-img " src="https://via.placeholder.com/1500" alt="Gallery image">
</div>

<div class="gallery-col">
<img class="gallery-img " src="https://via.placeholder.com/1500" alt="Gallery image">
</div>
</div>

</div>

在桌面上，每一行都应显示为 1x3 网格。在移动设备上，列的宽度变为 100%，因此该列占 80%，每行只有一张图片。

我已经设法以某种方式迷失了方向，因此我们将不胜感激。

更新

我变了

.gallery-wrap {
    width: 100%;
    display: flex;
}

到

.gallery-wrap {
    width: 100%;
    display: block;
}

这已经解决了桌面问题，我只需要它们像这个一样正确堆叠 Mobile Layout

如有任何帮助，我们将不胜感激。

Answer 1

从评论中发帖。

这是你更新后的 CSS

.gallery-wrap {
    width: 100%;
    display: block;
}

@media only screen and (max-width: 500px) {
.gallery-wrap {
    width: 100%;
    display: inline;
}
}

@media only screen and (max-width: 500px) {
.gallery-row {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  flex-direction: column;
}
}

.gallery-row {
    width: 80%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

.gallery-col {
    width: 33.3%;
    float: left;
}

@media only screen and (max-width: 500px) {
.gallery-col {
    width: 100%;
}
}

.gallery-img {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}