html - 显示 :none items still retaining space on the page

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

在 Samsung 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 编号匹配，我简化了选择器.