400px的CSS媒体查询不起作用

时间:2017-06-09 22:25:34

标签: html css3 media-queries

有人可以告诉我如何修复此媒体查询问题。https://jsfiddle.net/1z8sw4n5/19/

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

我希望400px隐藏内容列而不会破坏黄色右浮动,因此蓝色和黄色无缝接触并隐藏红色@ 400px或更少

1 个答案:

答案 0 :(得分:1)

其中一个问题是#left和#right的宽度都是200px。当浏览器小于400px时,div被强制堆叠。如果您将它们的宽度设置为50%并使用float: left,那么它们可以彼此相邻。 您还需要为#right创建媒体查询,并将原来的#right css移动到媒体查询之上。

这是一个修复......

Codepen:https://codepen.io/anon/pen/ZyQVeg?editors=1100