Question

我希望容器2始终位于容器1下方但位于“background”div之外。我可以用宽屏幕做到这一点但屏幕变窄时。 container2浮在container1的顶部。如何将container2保存在下面？

css container1和container2都具有来自twitter的bootstrap“container”类的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;
 }

Answer 1

如果您想在不同的屏幕上使用不同的布局，则应使用媒体查询：

您可以在较小的屏幕上使用绝对定位将第二个容器拉到第一个容器上。你应该将它们包含在一个div中，其位置为：relative applied

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

Answer 2

我不知道它如何影响标记中的其他元素，但您可以尝试：

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

还要考虑.container建议引导网格中最外层的元素，这样您就可以将背景设置为绝对（将其从流中取出）或将其放在container1中。

如何防止Div重叠

2 个答案: