将两个重叠的 div 对齐到其父级的底部答案

【问题标题】：Align two overlapping divs to bottom of their parent将两个重叠的 div 对齐到其父级的底部
【发布时间】：2016-08-03 20:00:10
【问题描述】：

我正在努力将两个 div 对齐到其父级的底部。

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

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

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

我想要的样子：

【问题讨论】：

标签： html css alignment css-float

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

【讨论】：

谢谢，它有效。除了我从.text 中删除了padding-right: 270px;，因为我需要将其内容居中。
@Taosique 好的，随你喜欢，不客气）

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

【讨论】：