Html 将两个重叠的div与其父div的底部对齐

我正在努力使两个div与它们的父对象的底部对齐

• 白色（

  class=“section”

  ）是父div，它的宽度为100%
• 灰色（

  class=“text”

  ）是100%宽的，并且可以根据内容具有随机高度，其高度可以小于白色和橙色，其底部必须与白色底部对齐
• 橙色（

  class=“icon”

  ）具有固定的宽度和高度，其底部必须与白色底部对齐，并应向右拉（可能与右侧有一些偏移），白色的高度必须调整为不小于橙色的高度

我尝试了

垂直对齐：底部

，

位置：绝对

和

浮动

的不同组合，但没有效果

JSFiddle：

我希望它看起来像什么：

---

您可以使用css

flex

实现以下功能：

正文{
背景色：#333333；
保证金：0；
}
.集装箱{
保证金：0自动；
宽度：80%；
}
.科{
背景色：#FFFFFF；
最小高度：200px；
边缘底部：100px；
弯曲方向：柱反向；
位置：相对位置；
显示器：flex；
宽度：100%；
}
.文本{
背景色：#999999；
右边填充：270px；
高度：150像素；
}
.高{
高度：300px；
}
.图标{
宽度：250px；
高度：250px；
背景色：#FF9933；
边框：#000000 2px虚线；
z指数：1；
位置：绝对位置；
底部：0；
右：0；
}

案例1：
灰色的高度比橙色的低
案例2：
灰色比橙色高

您需要确保在设置div.图标的位置时，您为其父div声明了一个位置。在为元素设置位置值时，它计算其相对于下一个已声明位置的直接父div的位置。如果.section未设置位置，则.icon将计算其相对于.container的位置（如果container已设置位置）

案例1：
灰色的高度比橙色的低
案例2：
灰色比橙色高
身体{
背景色：#333333；
保证金：0；
}
.集装箱{
保证金：0自动；
宽度：80%；
}
.科{
位置：相对位置；
背景色：#FFFFFF；
最小高度：200px；
边缘底部：200px；
宽度：100%；
}
.文本{
背景色：#999999；
高度：100px；
宽度：100%；
文本对齐：右对齐；
位置：绝对位置；
左：0；
底部：0；
}
.高{
高度：300px；
}
.图标{
宽度：250px；
高度：250px；
背景色：#FF9933；
边框：#000000 2px虚线；
z指数：1；
位置：绝对位置；
右：0；
底部：0；
}

谢谢，它很有效。除了我删除了

padding right:270px来自
.text
，因为我需要将其内容居中。@Taosique好的，由您决定，欢迎您）
<div class="container">
  <div class="section">
    <div class="text">
      <b>Case 1:</b>
      Gray has lower height than orange
    </div>
    <div class="icon">
    </div>
  </div>
  <div class="section">
    <div class="text tall">
      <b>Case 2:</b>
      Gray has bigger height than orange
    </div>
    <div class="icon">
    </div>
  </div>
</div>



body {
    background-color: #333333;
    margin: 0;
}
.container {
    margin: 0 auto;
    width: 80%;
}
.section {
    position:relative;
    background-color: #FFFFFF;
    min-height: 200px;
    margin-bottom: 200px;
    width: 100%;
}
.text {
    background-color: #999999;
    height: 100px;
    width: 100%;
    text-align: right;
    position:absolute;
    left:0;
    bottom:0;
}
.tall {
    height: 300px;
}
.icon {
    width: 250px;
    height: 250px;
    background-color: #FF9933;
    border: #000000 2px dashed;
    z-index: 1;
    position: absolute;
    right:0;
    bottom:0;
}