html - 对齐 div 容器内 div 行底部的按钮

问题描述

我有一个网页，其中包含一行“卡片”，每行包含一个 img、下面的一些文本和一个按钮样式的链接。文本的长度各不相同，但我希望每张卡片的长度相同，并且按钮对齐到每张卡片的底部。

<!--Grid row-->
<div class="row">
    <!--Grid column-->
    <div class="col-lg-3 col-md-12 mb-4">
        <!--Card-->
        <div class="card">
            <!--Card image-->
            <div class="view overlay">
                <img src="img/bb/didyouknow.jpg" class="card-img-top" alt="">
                <a href="didyouknow.html" onclick="trackOutboundLink(this, 'Internal Links', 'Did You Know'); return false;">
                    <div class="mask rgba-white-slight"></div>
                </a>
            </div>
            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Did you know?</h4>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="didyouknow.html" class="btn btn-primary" onclick="trackOutboundLink(this, 'Internal Links', 'Did You Know'); return false;">More</a>
                <!--<button id="didyouknow" type="button" onclick="window.open('didyouknow.html','_self'); trackOutboundLink(this, 'Internal Links', 'Did You Know'); return false;" class="btn btn-primary">More</button>-->
            </div>
        </div>
        <!--/.Card-->
    </div>
    <!--Grid column-->
    <!--Grid column-->
    <div class="col-lg-3 col-md-6 mb-4">
        <!--Card-->
        <div class="card">
            <!--Card image-->
            <div class="view overlay">
                <img src="img/bb/tipsntricks.jpg" class="card-img-top" alt="">
                <a href="staysmokefree.html" onclick="trackOutboundLink(this, 'Internal Links', 'Stay Smoke Free'); return false;">
                    <div class="mask rgba-white-slight"></div>
                </a>
            </div>
            <!--Card content-->
            <div class="card-body">
                <!--Title-->
                <h4 class="card-title">Stay smoke free</h4>
                <!--Text-->
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. Lots of text. Lots of text. Lots of text. Lots of text. Lots of text.</p>
                <a href="staysmokefree.html" class="btn btn-primary" onclick="trackOutboundLink(this, 'Internal Links', 'Stay Smoke Free'); return false;">More</a>
                <!--<button type="button" onclick="window.open('staysmokefree.html','_self');" class="btn btn-primary">More</button>-->
            </div>
        </div>
        <!--/.Card-->
    </div>
    <!--Grid column-->
</div>
<!--Grid row-->

此 CSS 通过使卡片高度填充父 div 来使每张卡片具有相同的高度：

.row {
    display: flex; /* equal height of the children */
    position:relative;
}

.card{
    height: 100%;/* fill parent div height*/
}

我遇到的问题是按钮没有水平对齐，因为它们只是位于文本完成的下方。如果我这样做：

.card-body a {
    position: absolute;
    bottom: 10px;
}

按钮在卡片底部对齐，但它们重叠并覆盖文本。如何让按钮出现在文本下方并在卡片之间对齐？

编辑：我制作了一个演示问题的 jsfiddle：https ://jsfiddle.net/captncanary/m156dqeu/

标签： htmlcss

过去，我需要实现相同的布局，最适合我的解决方案是使用flexbox。

基本上，我需要将上部内容与“页脚内容”分开，然后设置justify-content: space-between;为正文。

这是我试图解释的 JSFiddle 中的一个工作示例。

总结变化：

将您的上部内容（例如标题和描述）包裹在 a<div class="card-content">中，按钮应位于此元素之外。
将以下样式设置为.card-body：

CSS

.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

设置align-self: flex-start;为按钮以保留其宽度。

我希望它有帮助

html - 对齐 div 容器内 div 行底部的按钮

问题描述

解决方案

推荐阅读