顯示：沒有項目仍然保留頁面上的空間

Question

我有六個項目在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件物品保持其尺寸，並且屏幕縮小爲模仿肖像模式時，前面的項目佔據了空白區域。我怎樣才能讓空間被釋放，剩餘的物品填滿這個空間？

Answer 1

三星注在測試了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號碼，並簡化了選擇器。