0

尝试使用媒体查询设置不同的布局我在根据屏幕宽度定义 div 布局时遇到了麻烦

这是小提琴的结果

和 我正在使用的小提琴测试项目

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

red
green 
blue

当点击小于 1200 像素时

我究竟做错了什么 ？

4

4 回答 4

1

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

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

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

于 2013-05-15T11:42:51.400 回答
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 选择器放在要覆盖的代码下。

于 2013-05-15T11:38:37.383 回答
0

尝试使用display:block而不是display:inline-block 类Middle

于 2013-05-15T11:30:55.313 回答
0

问题是你有三个容器正在占用宽度并且有display:inline-block. 因此它们将相互平行对齐。如果你想要这种行为，那么你必须将它们扭曲在一个外部容器中，并通过指定 div 的宽度而不是 inmin-width将其设置为固定在该位置，请参见此处。px%

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

于 2013-05-15T11:42:00.497 回答