将两个重叠的div对齐到其父

Question

我努力将两个div对齐到他们父母的底部。

• 白色（class="section"）是父div，它是100％宽;
• 灰色（class="text"）100％宽，根据内容可以有随机高度，高度可以小于白色和橙色，底部必须与白色底部对齐;
• 橙色（class="icon"）具有固定的宽度和高度，其底部必须与白色底部对齐，并且应向右拉（可能与右侧有一些偏移），白色的高度必须适应不低于橙色的高度。

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

JSFiddle：https://jsfiddle.net/ca9we2jo/

我希望它看起来像：

Answer 1

您可以使用css 0来实现它，如下所示：

＆＃13;

＆＃13;

flex

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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