如何防止Div重叠

2013-10-02 75 views 1 likes

我希望容器2始终位于容器1的下方，但位于“背景”div之外。我可以用宽屏幕做到这一点，但当屏幕变窄时。 container2漂浮在container1的顶部。我如何将container2放在下面？如何防止Div重叠

css container1和container2都有来自twitter的引导“容器”类的css值。我只是添加了1和2来帮助解释我需要的东西。

<div class="Background"> 
    <div class="container1"> 
     <div class="row "> 
     <h1></h1> 
     </div> 
     <div class="row "> 
     <div> 
     </div> 
     </div>  
    </div> 
</div> 
<div class="container2"> 
</div>

CSS

.Background{ 
height: 250px; 
color: #cccccc; 
} 
.container { 
padding-right: 15px; 
padding-left: 15px; 
margin-right: auto; 
margin-left: auto; 
}

来源

2013-10-02 andrew13331

让我们看看你的CSS – George

他们都必须有'display：block' –

@JoshC divs默认具有'display：block'。 – Coop

回答

如果你想在不同的屏幕不同的布局，你应该使用一个媒体查询：

你可以在较小的屏幕上使用绝对定位在拉第二容器首先。你应该围绕他们两个与位置的div：相对适用

@media (max-width: 600px) { 
    .container2 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }

来源

2013-10-02 15:34:19 dtt101

我不知道它如何影响在标记等元素，但你可以尝试：

.Background,.container2{ 
    display :block // or inline-block with clearing floats 
}

同时认为，.container是建议自举网格中最外层的元素，以便您可以将背景设置为绝对（将其从流中取出）或放入container1中。

来源

2015-02-08 21:57:16 maioman

如何防止Div重叠

回答

相关问题