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%;
    }
}

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

Answer 2

使用bootstrap，它的好方法

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    
    
    
    <div class="row">
    <div class="col-md-6 col-xs-12">content here</div>
    <div class="col-md-6 col-xs-12">content here</div>
    </div>

＆＃13;

Answer 3

更新css并在html上的head标签上添加此<meta name="viewport" content="width=device-width, initial-scale=1.0">

#container {
   width:100%;
    overflow: hidden;
}
#one {
   width:50%;
   float:left;
}
#two {
   width:50%;
   float:right;
}
@media only screen and (max-width: 767px)
{
    #one, #two
    {
        display: block; 
        float: none; 
        width: 100%;
        padding: 20px 0;
    }
}

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

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

3 个答案: