1

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

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

2 回答 2

1

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

您可以在较小的屏幕上使用绝对定位将第二个容器拉到第一个容器上。您应该将它们都包围在一个 div 中，并应用 position:relative

@media (max-width: 600px) {
  .container2 {
    position: absolute;
    top: 0;
    left: 0;
  }
于 2013-10-02T15:34:19.157 回答
0

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

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

还要考虑.container建议引导网格中最外层的元素，因此您可以将背景设置为绝对（以将其从流中取出）或将其放入容器 1 中。

于 2015-02-08T21:57:16.413 回答