3

我有 2 个 div 向左浮动,因此它们将显示为内联

<div class==".container" style="width: 100%">
    <div class="leftColumn" style="width: 50%; float:left">
        test
    </div>

    <div class="rightColumn" style="width: 50%; float:left">
        test
    </div>
</div>

当屏幕低于 400 像素时,我希望 div 显示在彼此下方我当前的媒体查询

@media(max-width: 400)
{
    .leftColumn{background-color: Red; float: none}
    .rightColumn{background-color: Blue; float: right} 
}

感谢任何能提供帮助的人

4

3 回答 3

3

您可以通过以下方式获得相同的效果

@media(max-width: 400) {
   .leftColumn, .rightColumn{width:100%;} 
}
于 2012-06-03T22:38:59.660 回答
0

弄清楚了。

我在 div 上有内联样式

<div class="leftColumn" style="width: 50%; float:left">
    test
</div>

当我删除它时,一切正常。

于 2012-06-03T09:50:30.717 回答
0

是的,内联样式把它搞砸了,而且你没有 100% 正确地定义你的媒体查询,需要 px:

http://jsfiddle.net/XmqNy/

于 2012-06-04T13:29:30.823 回答