我在 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 个元素保持其大小,并且当屏幕收缩以模仿纵向模式时,前面的元素占据了空白空间。我怎样才能释放空间并让剩余的元素填满这个空间?
最佳答案
在 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
编号匹配,我简化了选择器.
关于html - 显示 :none items still retaining space on the page,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34973647/