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

【问题标题】：How to display two inner divs at the bottom of an outer div如何在外部 div 的底部显示两个内部 div
【发布时间】：2016-08-30 15:15:28
【问题描述】：

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

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

我尝试将 position:absolute;bottom:0 添加到两个内部 div。然后两者都消失了。我在外层div试了vert-align:bottom，没有效果。

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：

谢谢。它有点工作！我唯一的问题是，当 secondInnerDiv 没有任何值时，它仍然占据 50px 的高度。当 secondInnerDiv 为空时，firstInnerDiv 中的值是否会一直向下移动？谢谢
你可以改变高度：50px；到高度：自动；一切顺利！

【解决方案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>

【讨论】：

对不起，可能是我在描述问题时不清楚。内部 div 应该是一个在另一个之上，而不是并排。谢谢
K.没问题，我更新了我的 Ans Check 一次。

【解决方案3】：

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

【讨论】：