Question

我有一个外部div，它有两个内部div。第二个内部div可能包含也可能不包含文本值。目前，两个内部div显示在顶部。但是我希望始终显示在底部。 div如下所示：

<div class="outerDiv">
  <div class="firstInnerDiv"></div>
  <div class="secondInnerDiv"></div>
<div>

我试图在两个内部div中添加position：absolute; bottom：0。然后两个都消失了。我在外部div尝试了vert-align：bottom，这没有效果。

由于

Answer 1

将position:relative;提供给您的外部div和内部div以及position:absolute;提供给内部包装器（.inner），这样就可以了！

＆＃13;

.outerDiv{
  position:relative;
  width:100px;
  height:200px;
  border:1px solid black;
}
.inner{
  position:absolute;
  bottom:0;
}
.firstInnerDiv, .secondInnerDiv{
  width:100px;
  height:auto;
}
.firstInnerDiv{
  position:relative;
  border:1px solid red;
}
.secondInnerDiv{
  position:relative;
  border:1px solid green;
}

＆＃13;

<div class="outerDiv">Main
  <div class="inner">
    <div class="firstInnerDiv">Div 1</div>
    <div class="secondInnerDiv">Div 2</div>
  </div>
</div>

＆＃13;

Answer 2

Parant Div的位置应该给予“相对”并给予InnerDivs绝对的位置。

.outerDiv{
  position:relative;
  width:200px;
  height:200px;
  border:1px solid #ff8800;
}
.firstInnerDiv{
  position: absolute;
  width:100%;
  height:105px;
  border:1px solid red;
  bottom:-110px;
}
.secondInnerDiv{
  position: absolute;
  width:100%;
  height:105px;
  border:1px solid red;
  bottom:-215px;
  
}

This Is Example Of Your Requirement Try Once .

<div class="outerDiv">This IS Main Div
  <div class="firstInnerDiv">Inner One</div>
  <div class="secondInnerDiv">Inner Two</div>
<div>

Answer 3

绝对定位的元素将相对于定位的最近父元素定位。如果没有定位，它们将相对于。如果你给.outerDiv一个position: relative;的CSS，然后绝对定位内部元素，那么你应该得到你正在寻找的结果。您可以阅读有关定位here的更多信息。

如何在外部div的底部显示两个内部div

3 个答案: