Question

我正在尝试研究如何根据窗口宽度制作一排图像。到目前为止，我有：

<div class="image-slider">
  <div><img src="/img1.jpg"></div>
  <div><img src="/img2.jpg"></div>
  <div><img src="/img3.jpg"></div>
  <div><img src="/img4.jpg"></div>
  <div><img src="/img5.jpg"></div>
</div>

和...

.image-slider {
  display: flex;
  overflow-y: scroll;
}

.image-slider div {
  flex: 1;
  margin: 5px
}

.image-slider div img {
  width: 100%;
  height: auto;
  min-width: 125px;
}

这很好用，但我现在想要的是当窗口小于880像素时使第五张图像消失，并将剩下的四张图像调整大小以占用剩余空间。

我尝试在第五个wide-only标记中添加div类：

<div class="wide-only"><img src="/img5.jpg"></div>

然后添加了一些媒体规则，如下所示，但它不是很有效：

.image-slider div img.wide-only {
  display:none;
}

@media(min-width:880px) {
  .image-slider div img.wide-only {
    flex: 1 /* not sure what this should be - tried display: flex too */
  }
}

Answer 1

您添加了display:none因此，在媒体查询中您应该添加display:block（我还更正了一些CSS选择器，因为您没有定位正确的标记）：

.image-slider .wide-only {
  display:none;
}

@media(min-width:880px) {
  .image-slider .wide-only {
    display:block;
    flex: 1 /* not sure what this should be - tried display: flex too */
  }
}

完整代码：

＆＃13;

.image-slider {
  display: flex;
  overflow-y: scroll;
}

.image-slider div {
  flex: 1;
  margin: 5px
}

.image-slider div img {
  width: 100%;
  height: auto;
  min-width: 125px;
}

.image-slider  .wide-only {
  display: none;
}

@media(min-width:880px) {
  .image-slider .wide-only {
    display: block;
    flex: 1/* not sure what this should be - tried display: flex too */
  }
}

＆＃13;

<div class="image-slider">
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div class="wide-only"><img src="https://lorempixel.com/400/400/"></div>
</div>

＆＃13;

Answer 2

如果您想避免在html标记中添加其他类，可以使用nth-child伪选择器完成此操作，并使标记更清晰，更易于维护。

.image-slider div:nth-child(n+5);将匹配图像滑块的第5个，第6个等子div。

以下是您的两个滑块＆＃39;一个包含5个元素，一个包含9个元素。低于880px它只会显示4.高于所有将显示。

这样的方法更具可扩展性，因为您可以简单地添加具有更高nth-child值的其他媒体查询，例如，如果您想要在1024或其他地方显示6，在1280显示8，等等。＃39; t必须编辑你的HTML 和你的CSS。

您会注意到我还颠覆了媒体查询以使用max-width，因此我们从小屏幕开始，并随着它们变大而改善体验。移动第一种方法。

（显然，查看整个片段的片段）

＆＃13;

.image-slider {
  display: flex;
  margin-bottom: 1rem;
}

.image-slider div {
  flex: 1;
  margin: 3px;
}

.image-slider div img {
  width: auto;
  max-width: 100%;
}

@media(max-width:879px) {
  .image-slider div:nth-child(n+5) {
    display: none;
  }
}

＆＃13;

<div class="image-slider">
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
</div>


<div class="image-slider">
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
  <div><img src="https://lorempixel.com/400/400/"></div>
</div>

＆＃13;

如何制作响应的图像行

2 个答案: