html - 根据其他要求将 div 移动到父级的底部

Question

如何将子 div 对齐到父 div 的底部？该解决方案需要保持 hr 宽度完整，保持父 div 的填充有效，并保持文本右对齐。

为什么以前的答案不起作用:

• position: relative on parent and position: absolute with bottom: 0px on child 不起作用，因为它会缩小 hr 并忽略来自父 div 的填充。
• Flexbox 不起作用，因为我的父项已被用作具有不同属性的 flexbox，并且它还缩小了 hr。

我当然会查看包含定位或 flexbox 的答案，但我已经尝试了我所知道的，但没有找到好的解决方案。

.parent {
  width: 500px;
  height: 250px;
  background-color: gray;
  padding: 10px;
}

.child {
  height: 50px;
  text-align: right;
}

<div class="parent">
  <div class="child">
    <hr>
    <label>I am Batman</label>
  </div>
</div>

Answer 1

您可以将 margin-top: auto 和 width: 100% 赋给 child 元素:

.parent {
  width: 500px;
  height: 250px;
  background-color: gray;
  padding: 10px;
  display: flex;
}

.child {
  height: 50px;
  text-align: right;
  margin-top: auto;
  width: 100%;
}

<div class="parent">
  <div class="child">
    <hr>
    <label>I am Batman</label>
  </div>
</div>