如何在移动设备上垂直堆叠div，但在网络版本上保持水平？ [英] How to stack divs vertically on mobile but keep them horizontal on web version?

问题描述

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

I added some div tags to create two columns in a wordpress post. Here is the code I used:

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

我在我的style.css文件中添加了上面的代码。

I added the code above to my style.css file.

在我的网页上查看时，一切看起来都很好。但是，在移动设备上观看时看起来很糟糕。下面的代码是我添加的内容：

When viewed on my webpage everything looks fine. However, when viewed on mobile it looks bad. Code below is what I added to post:

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

我想做的是在移动设备上垂直放置div。对于编码经验有限的人，有没有一种比较简单的方法？

What I'd like to do is stack the divs vertically when viewed on a mobile device. Is there a fairly simple way to do this for someone that has limited coding experience?

谢谢

推荐答案

看看媒体查询。

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

请注意，这必须在上面的代码之后，除非您使选择器更具体。

Note that this has to go after your code above, unless you make the selectors more specific.

这篇关于如何在移动设备上垂直堆叠div，但在网络版本上保持水平？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！