移动响应式图片库

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%，每行只有一张图像。

不知何故，我设法迷失了方向，因此我们将不胜感激。

UPDATE

我变了

.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;
}

Answer 2

您真正想做的是在图库对象上使用边距和填充，而不是将其子对象设置为宽度的百分比。您可以使用 display:block 以 100% 的宽度显示一行，然后增加画廊的填充以确保一切都显示得很好。然后，在每一行中，您可以创建填充块容器 33.3% 的图像对象并显示：内联。

对于移动设备，您还可以使用媒体查询将图库的填充设置为接近无，并将每行内的图像对象设置为 display:block 而不是 display:inline 在媒体查询中，确保它们显示在在移动敏感屏幕上相互叠加。

虽然我喜欢 Flexbox 变得越来越普遍和易于使用，但我不认为这样的事情需要它。

看这个例子：

`https://codepen.io/cainenielsen/pen/GRKMWzR`

如果您对此有任何疑问，请告诉我。