div通过CSS媒体查询显示属性更改

Question

尝试使用媒体查询设置不同的布局 我根据屏幕宽度

定义了divs布局

这是the fiddle result

和  the fiddle test project我正在使用

问题是我希望它能够将堆叠放在其他人之上

red
green 
blue 

击中小于1200 px

我在做错了什么？

Answer 1

您遇到的主要问题是CSS忽略了您的@media代码。您正在使用内联CSS，并且内联CSS规则总是从外部CSS规则（==您的@media代码）中获胜。

建议阅读CSS的级联顺序：http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

对于你的jsfiddle，将所有代码从style="..."转移到你右边的css框架，使其成为外部css而不是内部CSS。然后只需对其进行重新排序：如果您希望媒体覆盖默认的css，请将@media选择器置于下，以覆盖您想要覆盖的代码。

Answer 2

不确定这是否是您想要的，但请查看：http://jsfiddle.net/4v6FC/11/embedded/result/

我认为你的css规则优先级存在问题：display元素的style属性中定义的div属性优先于样式表中定义的属性，无论屏幕大小如何。 对于示例，我只在媒体查询之外为所有div元素设置此属性，并从样式属性中删除display属性。

这是一篇解释cess规则优先级的文章：http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 3

尝试使用display:block代替display:inline-block用于课程Middle

Answer 4

问题是你有三个容器正在占用宽度并且有display:inline-block。所以他们将彼此平行对齐。如果您想要这种行为，那么您必须在外部容器中对它们进行扭曲并设置其min-width以通过在px而不是%中指定divs宽度使其固定在该位置， see here.

如果您希望元素相互堆叠，则必须使用display:block。在这种情况下，你不需要任何其他东西。