Css 如何将集装箱定位到固定位置？

我有一个div，显示下一篇和上一篇博客文章。我在一个容器中有标题

（页脚发布标题）

，在另一个容器中有年份和“阅读更多”按钮

（页脚发布按钮）

。我需要让第二个容器留在主容器的底部

（blog\u image\u footer）

，无论标题在

（footer\u post\u title）

中有多长。我怎样才能做到这一点

<div class="col-md-6 more-articles-left">
    <div class="more-articles previous">
        <div class="blog_image_footer">
            <div class="row artikkel-title-previous" style="height:100%; background: linear-gradient(24deg, rgba(167, 85, 194, 0.9), rgba(219, 197, 218, 0.9)), url('/files/blog_pictures/o-KID-EATING-facebook.jpg') no-repeat center center /cover">
                <div class="container footer_post_title">
                    <div class="col-md-12">
                        <h1 class="blog_post_title_footer">How to teach Your kids to eat healthy</h1>
                    </div>
                </div>
                <div class="container footer_post_buttons">
                    <p class="blog_post_year_footer">December 2016</p>
                    <a href="article.php?article_title=how-to-teach-your-kids-to-eat-healthy" class="btn btn-default btn-footer-read-more" name="read-more-article">Read now!</a>
                </div>
            </div>
        </div>
    </div>
</div>

如何教你的孩子健康饮食
2016年12月

尝试使用引导网格系统：

---

这应该允许您使h1容器具有响应性。

您可以将

位置：相对

设置为容器，将

位置：绝对

设置为其子元素，这样您就可以将子元素作为父元素的参考来定位

之后，您可以将

bottom:0

设置为子对象，这样子对象将固定在其容器的底部

.blog_image_footer{
    position: relative;
}

.footer_post_buttons{
    position: absolute;
    bottom: 0;
}

---

您可以使用以下基本原则：

*{
框大小：边框框；
}
正文，html{
身高：100%；
宽度：100%；
保证金：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
#容器
{
保证金：0自动；
宽度：100%；
背景色：白色；
边框：0.2米纯黑色；
弹性收缩：0；
柔性生长：1；
显示器：flex；
}
#页脚，#页眉
{
保证金：0自动；
宽度：100%；
文本对齐：居中；
高度：1.5em；
背景色：白色；
边框：0.2米纯黑色；
弹性收缩：0；
}

标题在这里
这是集装箱
页脚在这里

我不知道这里有什么问题。。当标题展开时，应按下第二个容器（

footer\u post\u按钮

）。这应该已经表现得像你现在想要尝试的那样了。是的，我可以看到我自己在使用这个选项。谢谢还有一个问题。可能的话，页脚按钮的宽度是100%吗？因为现在它位于主管道的左侧container@raqulka您的意思是将其置于容器的中心，还是子元素的宽度为100%？子元素的宽度为100%