Question

我在100％-width 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/

唯一的调整是将alt元素中的img标记与相应的轮播ID数字相匹配，并简化了选择器。

显示：页面上的所有项目仍然保留空间

1 个答案: