将两个重叠的 div 对齐到其父元素的底部

Question

我正在努力将两个 div 对齐到它们父项的底部。

白色 (class="section") 是父级 div，宽度为 100%；
灰色(class="text") 100%宽，高度可以根据内容随机设置，高度可以比白色和橙色小，底部必须与白色底部对齐；
橙色（class="icon"）的宽高是固定的，它的底部必须和白色的底部对齐并且要向右拉（可以向右偏移一些），高度白色必须适应不低于橙色的高度。

我尝试了 vertical-align: bottom、position: absolute 和 float 的不同组合，但无济于事。

我想要的样子：

Answer 1

可以使用cssflex实现如下：

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

<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>

Answer 2

您需要确保在设置 div .icon 的位置时，为其父级 div 声明了一个位置。为元素设置位置值时，它会计算其相对于下一个已声明位置的直接父级 div 的位置。如果 .section 没有设置位置，那么 .icon 将计算它相对于 .container 的位置（如果容器有位置设置）。

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

将两个重叠的 div 对齐到其父元素的底部

Align two overlapping divs to bottom of their parent

html

css

alignment

css-float