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

我有六个项目在100％宽度carousel。当屏幕处于纵向方向，我想只有3项出现，所以我用媒体查询（在这里是完全script的jfiddle）跌3：显示：没有项目仍然保留页面上的空间

@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件物品保持其尺寸，并且屏幕缩小为模仿肖像模式时，前面的项目占据了空白区域。我怎样才能让空间被释放，剩余的物品填满这个空间？

来源

2016-01-24 Agni Scribe

没有看到你的旋转木马脚本，这很难回答，但是，你是否告诉你的旋转木马只显示3，当你隐藏其他人？如果你隐瞒那不好，因为它可能认为他们仍然存在 –

是的 - 代码是在小提琴链接的问题：https://jsfiddle.net/0oug0t3r/ –

@Darren以上是我通过的媒体查询，并与此，其余三个没有提到的问题 - 显示器占用的空间：没有项目被保留，我正在寻找一种方法，使它看起来像那些3项目不存在;其余3项应填满宽度。 –

三星注在测试了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号码，并简化了选择器。

来源

2016-01-24 15:27:17

谢谢@迈克尔 - 我在媒体查询中试过这个和其他的tweeks，出于某种原因，它仍然保持显示器占用的空间：没有项目。最后，我在与wrapper4相同的html中创建了另一个包装器，但仅包含3个项目。我将它隐藏在风景中，并将它展示在包装4的肖像中。不知道为什么它不工作，否则。可能与使用flexbox有关（因为我使用此代码）。 –

这很有趣。一切工作正常在这方面。我可以使用纵向，横向和宽度表达式移除单个轮播物品（包括它们占用的空间）。适用于手机和台式机。 –

我认为它确实与flexbox冲突有关（flex-item应该如何处理display：none） - 我会分享一个快照，看它在修复之前的样子是否与一个相同的包装器相似（似乎不能添加在这里），它基本上看起来像一个很好的图像带，两者之间只有背景颜色差距。 –

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

回答

相关问题