Html 绝对定位的孩子没有得到父母'；背景色

我有4个按钮（“阅读更多”）在他们父母的底部对齐在同一水平

每一个都有不同的内容，所以为了给它们相同的尺寸，我使用了flexbox和绝对定位

现在的问题是，我希望每个家长都有一个背景色，按钮留在里面，但它们留在外面，因为我告诉他们在每列的底部

我有点被卡住了，因为如果我去掉按钮的绝对位置，父母会有不同的尺寸，我不希望他们有一个确定的高度为响应设计

.col-3{
宽度：25%；
背景颜色：红色
}
* {
框大小：边框框；
保证金：0；
填充：0；
}
*：：之前，
*：：之后{
框大小：边框框；
}
[类别*=“列-”]{
浮动：左；
}
.行：：之后{
内容：“；
明确：两者皆有；
显示：块；
}
#服务{
背景色：rgb（265265265）；
颜色：#4242；
}
#服务，col-3{
填充：0 20px 20px；
文本对齐：左对齐；
}
#服务。第3列第3行：第一个孩子{
左边距：0
}
#服务。右对齐{
文本对齐：右对齐；
}
#服务[class^=“flaticon-”]：在，
#服务[class^=“flaticon-”]：在，
#服务[类别*=“flaticon-”]：之前，
#服务[类别*=“flaticon-”]：之后{
字体大小：60px；
左边距：0；
-webkit过渡：颜色0.8s；
过渡：颜色0.8s；
}
#服务[类别*=“flaticon”]：悬停{
颜色：#1AC4F8
}
#服务h3{
利润率：10px 0
}
.btn{
显示：内联块；
字体系列：“Oswald”，无衬线；
字体大小：400px；
填充物：5px10px；
边框：2px实心#1AC4F8；
颜色：#1AC4F8；
光标：指针；
-webkit过渡：颜色0.8s，背景色0.8s；
过渡色：颜色0.8s，背景色0.8s；
}
.行{
显示器：flex；
弯曲方向：行；
填充底部：40px；
}
.栏目{
flex:0自动；
位置：相对位置；
}
.btn底部{
位置：绝对位置；
底部：-40px；
左：0px；
右：0px；
文本对齐：居中；
}

服务
咨询和审计
从我们经验丰富的专家那里获取帮助，以加速公司的在线运营。这听起来很好

网络开发
专业定制电子商务和网页设计，让您的业务快速增长。看看我们是怎么做到的

搜索引擎优化
想登上谷歌和必应的第一页吗？了解我们的SEO服务，它可以吸引更多潜在客户

点击付费管理
通过谷歌广告词、显示、重定目标、Facebook、YouTube、Twitter吸引高度相关的受众

既然您已经在使用flexbox，为什么不使用flex属性将“阅读更多”按钮固定到底部呢。你不需要绝对定位

尝试将

.col-3

制作成嵌套的flex容器：

.col-3 {
    display: flex;
    flex-direction: column;
    width: 25%;
    background-color: red
}

.btn {
    margin-top: auto;
}

.row{
显示器：flex；
弯曲方向：行；
填充底部：40px；
}
上校3{
显示器：flex；
弯曲方向：立柱；
宽度：25%；
背景颜色：红色
}
* {
框大小：边框框；
保证金：0；
填充：0；
}
*：：之前，
*：：之后{
框大小：边框框；
}
#服务{
背景色：rgb（265265265）；
颜色：#4242；
}
#服务，col-3{
填充：0 20px；
}
#服务。第3列第3行：第一个孩子{
左边距：0
}
#服务。右对齐{
文本对齐：右对齐；
}
#服务[class^=“flaticon-”]：在，
#服务[class^=“flaticon-”]：在，
#服务[类别*=“flaticon-”]：之前，
#服务[类别*=“flaticon-”]：之后{
字体大小：60px；
左边距：0；
-webkit过渡：颜色0.8s；
过渡：颜色0.8s；
}
#服务[类别*=“flaticon”]：悬停{
颜色：#1AC4F8
}
#服务h3{
利润率：10px 0
}
.btn{
页边顶部：自动；
字体系列：“Oswald”，无衬线；
字体大小：400px；
填充物：5px10px；
边框：2px实心#1AC4F8；
颜色：#1AC4F8；
光标：指针；
过渡色：颜色0.8s，背景色0.8s；
}

服务
咨询和审计
从我们经验丰富的专家那里获取帮助，以加速公司的在线运营。这听起来很好

网络开发
专业定制电子商务和网页设计，让您的业务快速增长。看看我们是怎么做到的

搜索引擎优化
想登上谷歌和必应的第一页吗？了解我们的SEO服务，它可以吸引更多潜在客户

点击付费管理
通过谷歌广告词、显示、重定目标、Facebook、YouTube、Twitter吸引高度相关的受众

就是这样！谢谢！最后一件事，我一直在试图弄清楚“利润率顶端：自动”是如何在这里工作的，但我猜不出来。我不太熟悉flexbox。我在回答中提供了一个链接。单击文本“flex

auto

margin”。又来了：太棒了！谢谢！