Question

我有一个包含3个单元格的div，我想在它下面放置另一个div。但由于某种原因，它出现在包装div之上。我尝试了一些我在stackoverflow上找到的东西，但似乎没有用。这是应该起作用的解决方案之一：

HTML：

<div class="col-sm-5 col-sm-offset-3" id="wrapper">
    <div class="row">
       <div class="col-sm-1 col-sm-offset-2" id="col1"> col1 </div>
       <div class="col-sm-1 col-sm-offset-2 " id="col2"> col2 </div>
       <div class="col-sm-1 col-sm-offset-2" id="col3"> col3 </div>
   </div>
</div>

<div id="below">
This should be below the wrapper div
</div>

CSS：

#col1{
    background-color: lime;
    border: solid 1px;
    text-align: center;
}
#col2{

    background-color:  aqua;
    border: solid 1px;
    text-align: center;
}
#col3{
    background-color:  lightpink;
    border: solid 1px;
    text-align: center;
}
#wrapper{
    border: solid 1px;
    height: 100%;
    top: 100px;


}
#below{
    border: solid 2px;
    text-align: center;
    min-height: 100%;
    min-width: 100%;   
    clear: both;

}

Answer 1

原因是你在包装元素上使用top: 100px。

MDN上的

top：

...对于相对定位的元素，元素的偏移量如果没有定位，则移动到正常流量的位置以下。

这意味着当您使用#wrapper移动top - 元素时，#below - 元素会保留在您未使用top的位置。< / p>

要解决此问题，您可以改用margin-top: 100px，这不会改变#wrapper的正常流量。

div下面的Bootstrap div

1 个答案: