Html 将div与其他要求一起移动到父级的底部

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

为什么前面的答案不起作用：

• 父级上的位置：相对和子级上的位置：绝对和底部：0px不起作用，因为它收缩hr并忽略父级div中的填充
• Flexbox不起作用，因为我的父对象已被用作具有不同属性的Flexbox，并且它还收缩了hr

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

.parent{
宽度：500px；
高度：250px；
背景颜色：灰色；
填充：10px；
}
.孩子{
高度：50px；
文本对齐：右对齐；
}

我是蝙蝠侠

您可以为子元素指定

页边距顶部：自动

和

宽度：100%

：

.parent{
宽度：500px；
高度：250px；
背景颜色：灰色；
填充：10px；
显示器：flex；
}
.孩子{
高度：50px；
文本对齐：右对齐；
页边顶部：自动；
宽度：100%；
}

我是蝙蝠侠

您可以使用

align self:flex-end

：

.parent{
宽度：500px；
高度：250px；
背景颜色：灰色；
填充：10px；
显示器：flex；
}
.孩子{
flex:1；/*模仿“宽度：100%”*/
自对齐：柔性端；/*影响水平对齐，将自身放置在父图元的底部*/
高度：50px；
文本对齐：右对齐；
}

我是蝙蝠侠

添加位置：相对于父对象，并向子对象添加一些内容。如果您不能在父容器上使用flexbox，此解决方案将起作用（尽管flexbox是一个更好、更容易的解决方案）

注:

• 子对象上的边距替换使用“位置：绝对”时松开的填充
• 要填充宽度，请使用计算器（100%-（10px*2））。这使得div为100%，然后在每侧减去10px的余量。这将生成一个正确填充该区域的div

.parent{
宽度：1000px；
高度：500px；
背景颜色：灰色；
填充：10px；
位置：相对位置；
}
.孩子{
高度：50px；
背景颜色：橙色；
文本对齐：右对齐；
位置：绝对位置；
底部：0px；
右：0px；
利润率：10px；
宽度：计算（100%-（10px*2））；
}

因为我在父子div中使用了相对位置和绝对位置，所以它忽略了填充。所以，您必须在childdiv中设置bottom来显示它

.parent{
宽度：500px；
高度：250px；
背景颜色：灰色；
填充：10px；
位置：相对位置；
}
.孩子{
宽度：计算（100%-（10px*2））；
高度：50px；
文本对齐：右对齐；
位置：绝对位置；
底部：10px；
}

我是蝙蝠侠