Question

我有一个页面，当我在笔记本电脑屏幕上看这个页面时，两个div正在渲染，但是当我在移动屏幕上看这个页面时，这两个div相互重叠。我想删除这些div的重叠，并想要读取第一个div然后第二个div。

怎么做？

Answer 1

@media only screen and (max-width:768px){
.vc_row-fluid.lighter-overlay, 
.vc_row-fluid.darker-overlay{
 display:inline-block; /* Change this to inline-block instead of block */
}
}

但这会为标题创建问题，相应地解决

Answer 2

使用Bootstrap查看。它提供了响应式CSS。你必须包括你需要的div类。

示例：如果您有两个div，将它们放入一个主div中，然后使用单独的div类调用每个div。像

<div class="col-sm-12">

<div class="col-sm-6">
// your code for first div
</div>

<div class="col-sm-6">
//your code for second div
</div>

</div>

试试这样。它可能对你有所帮助。

Answer 3

我希望我理解你的问题，因为它不是很清楚（没有提供代码）

但我认为您需要做的是以下内容：

<!-- Probably your html part -->

<div class = "wrapper">
    <div class = "container">
        <!-- Some content-->
    </div>
    <div class = "container">
        <!-- Some content-->
    </div>
</div>

这是css魔术......

.wrapper{
    display:block;
}
.container{
    display: inline-block;
}
@media only screen and (max-width:768px){
    .container{
        width:100%;
     }
}
@media only screen and (min-width:768px){
    .container{
        width:50%;
     }
}

通过使用媒体查询，您可以轻松修复此类内容

Answer 4

您在评论中添加了一个演示网址为http://voyagecontrol.com/canarywharf

的评论

问题的根源：#venue_draft具有内嵌样式，包括height: 900px 解决方案：应该删除它（元素应该自动适应或多或少的内容。不固定高度是一个良好的开端），或者，如果出现其他问题，请替换为min-height: 900px

如何防止两个div的重叠？

4 个答案: