Question

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

.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％并显示：inline。

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

尽管我喜欢Flexbox变得越来越普遍和易于使用，但我不认为这种事情是必需的。

请参见以下示例：

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

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

移动响应式图库

2 个答案: