如何强制元素位于 div/card 的底部答案

【问题标题】：How can I force an element to sit at bottom of div/card如何强制元素位于 div/card 的底部
【发布时间】：2020-11-04 10:59:33
【问题描述】：

我正在制作卡片，最后带有链接。我想要做的是让链接无论如何都位于 div 的底部。目前，它们位于文本的末尾。有没有简单的方法来实现这一点？

如果可以避免的话，我不想使用卡片页脚，我只想将它与产品链接所在的 div 底部对齐。这是它现在的样子：

HTML

            <div class="card wow fadeIn swipe-away hover-shadow ">
                <img class="card-img-top" src="<?php the_sub_field('product_image'); ?>">
                <div class="card-body">
                    <h5 class="card-title"> <?php the_sub_field('product_name'); ?></h5>
                    <p class="card-text"> <?php the_sub_field('brief_description'); ?></p>
                    <a href="<?php the_sub_field('product_link'); ?>" class="h3 read-more-full btn hero-btn wow fadeIn btn-accent">View Strain</a>
                </div>

            </div>

【问题讨论】：

这能回答你的问题吗？ CSS: fixed to bottom and centered

标签： css bootstrap-4

【解决方案1】：

您可能希望卡体 div 占据 100% 的高度以占用所有剩余空间。然后，如果它是一个弹性框并且描述元素被设置为增长，它将按下按钮。不是 100% 确定引导程序语法，但它可能看起来像这样：

 <div class="card-body d-flex flex-column h-100">
    <h5 class="card-title"> <?php the_sub_field('product_name'); ?></h5>
    <p class="card-text flex-grow-1"> <?php the_sub_field('brief_description'); ?></p>
    <a href="<?php the_sub_field('product_link'); ?>" class="h3 read-more-full btn hero-btn wow fadeIn btn-accent">View Strain</a>
 </div>

【讨论】：

【解决方案2】：

通过将位置设置为绝对位置并将底部设置为 0px 或一些较小的值。

<div style=position:absolute;bottom:10px;">

【讨论】：