如何在移动设备上垂直堆叠div,但在网络版上保持水平？

Question

我添加了一些div标签来在wordpress帖子中创建两列.这是我使用的代码:

#container {
   width:100%;
}
#one {
   width:50%;
   float:left;
}
#two {
   width:50%;
   float:right;
}

我将上面的代码添加到我的style.css文件中.

在我的网页上查看时,一切都很好.但是,在移动设备上查看它看起来很糟糕.以下代码是我发布的帖子:

<div id="container">
<div id="one">content here</div>
<div id="two">content here</div>
</div>

我想做的是在移动设备上查看时垂直堆叠div.对于编码经验有限的人来说,有一种相当简单的方法吗？

谢谢

Answer 1

看看媒体查询.

@media all and (max-width:800px) //800px for tablets and phones.
{
    #one, #two
    {
        display: block; 
        float: none; 
        width: 100%;
    }
}

请注意,这必须遵循上面的代码,除非您使选择器更具体.