Question

我有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>

当屏幕低于400px时，我希望div显示在彼此之下我当前的媒体查询

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

感谢任何可以提供帮助的人

Answer 1

你可以通过

获得相同的效果

`@media(max-width: 400) {
 .leftColumn, .rightColumn{width:100%;} }`

Answer 2

想出来。

我在div上有内联样式

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

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

Answer 3

是的，内联样式让人烦恼，而且你没有正确定义媒体查询100％，需要px：

http://jsfiddle.net/XmqNy/

响应式设计 - 2列到一列

3 个答案: