显示：没有项目仍在页面上保留空间

Question

我在 100% 宽度 carousel 中有六个项目。当屏幕处于纵向时，我只想显示 3 个项目，所以我使用媒体查询删除了 3 个（这里是带有完整 script 的 jfiddle）：

 @media all and (orientation:portrait) {

    .wrapper4 .carousel1{
        display: none;
    }

    .wrapper4 .carousel3{
        display: none;
    }

    .wrapper4 .carousel6{
        display: none;
    }
}

这 3 个项目消失了，但它们占据的空间仍然保留。而当我试图让剩余的物品填满之前占用的空间时，它不起作用。

.wrapper4 .carousel {
    flex: 1; min-width: 33.3333%;
} 

即。以上无助于分散剩余的项目。旋转木马中剩余的 3 个项目保持其大小，并且当屏幕收缩以模仿纵向模式时，之前的项目占据了空白空间。我怎样才能获得要释放的空间和剩余的项目来填满这个空间？

Answer 1

在三星 Note 中的 Chrome 上进行测试，效果符合预期：

---

所有轮播项目在纵向模式下消失：

@media all and ( orientation: portrait ) {

    .carousel1 { display: none; }
    .carousel2 { display: none; }
    .carousel3 { display: none; }
    .carousel4 { display: none; }
    .carousel5 { display: none; }
    .carousel6 { display: none; }

}

https://jsfiddle.net/0oug0t3r/11/（也可以通过调整窗口大小在桌面上测试）

---

所有轮播项目在横向模式下消失：

@media all and ( orientation: landscape ) {

    .carousel1 { display: none; }
    .carousel2 { display: none; }
    .carousel3 { display: none; }
    .carousel4 { display: none; }
    .carousel5 { display: none; }
    .carousel6 { display: none; }

}

https://jsfiddle.net/0oug0t3r/12/

---

删除问题中描述的三个轮播项目：

@media all and ( orientation: portrait ) {

    .carousel1 { display: none; }
    .carousel3 { display: none; }
    .carousel6 { display: none; }

}

https://jsfiddle.net/0oug0t3r/13/

---

所做的唯一调整是将img 元素中的alt 标签与相应的轮播ID 编号匹配，并且我简化了选择器。