400像素的CSS媒體查詢無法正常工作

Question

有人可以告訴我如何解決此媒體查詢問題。.https ://jsfiddle.net/1z8sw4n5/19/

  .clear { clear: none; display: none; }  

我希望在400px的情況下隱藏內容列而不破壞黃色的右浮動，以便藍色和黃色無縫接觸並在@ 400px或更小的范圍內隱藏紅色

Answer 1

問題之一是#left和#right的寬度均為200px。 當瀏覽器小於400px時，div被強制堆疊。 如果將它們的寬度都設置為50％並使用float: left則它們可以彼此相鄰放置。 您還需要為#right創建一個媒體查詢，並將原始的#right css移動到媒體查詢上方。

解決方法

Codepen： https ：//codepen.io/anon/pen/ZyQVeg ？ editors = 1100