CSS问题：如何在保持卡片尺寸一致的前提下固定按钮至卡片底部

问题描述 #

开发作品集卡片组件时，需实现两个核心需求：

1. 卡片内的SOURCE按钮固定在卡片底部
2. 所有卡片尺寸完全一致

尝试过程中遇到的问题：

• 给卡片父元素设置display:flex后整体布局混乱
• 使用align-self:end或align-items:end时，浏览器提示display:block属性阻止样式生效
• 将卡片内所有元素对齐到底部后，卡片尺寸出现差异

解决方案 #

核心思路是将每个卡片设置为垂直方向的Flex容器，通过margin-top: auto将按钮推至底部，同时给卡片设置固定高度（或最小高度）保证所有卡片尺寸统一。具体修改点：

1. 将.card的display:inline改为display:flex，并设置flex-direction: column，让内部元素垂直排列
2. 给.card添加固定高度（或min-height），确保所有卡片高度一致
3. 给卡片内的按钮添加margin-top: auto，使其自动对齐到卡片底部
4. 可选：给卡片内的文本区域设置overflow-y: auto，防止内容过长撑爆卡片

修改后的代码 #

HTML代码（保持原结构） #

<div class="flex-center">
    <div class="portfolio__cards">
        <div class="portfolio__cards__scroll">
            <div id="card1" class="card">
                <h2>OSC Website</h2>
                <p id="card1text">A website to serve as a landing page for new members as a hub of information about the club, with a dynamic blog and content management system.
                    Built in Javascript, HTML, CSS, with the frameworks/tools: NodeJS, Express, EJS.
                </p>
                <button onclick="location.href = 'https://github.com/ufosc/Club_Website_2';">SOURCE</button>
            </div>
            <div id="card2" class="card">
                <h2>Schedule Helper</h2>
                <p id="card2text"> A website to assist students in creating schedules that work for them by using UF's Schedule of Courses along with
                    RateMyProfessor and GatorEval scores. Built in Typescript and Python, with the frameworks/tools: React, Tailwind.
                </p>
                <button onclick="location.href = 'https://github.com/ufosc/Schedule_Helper';">SOURCE</button>
            </div>
            <div id="card3" class="card">
                <h2>Lunch Buddy</h2>
                <p id="card3text">An application that lets you find and match with like-minded students on campus to study, have a meal with, and more!
                    Built with React Native for the front-end, Golang for the back-end, and MySQL.
                </p>
                <button onclick="location.href = 'https://github.com/ufosc/Lunch_Buddies';">SOURCE</button>
            </div>
            <div id="card4" class="card">
                <h2>Manim</h2>
                <p id="card4text">Inspired by 3Blue1Brown, creating a plug-in that adds to the Manim project which would allow for programmatic animation of computer science concepts.
                    Built in Python, with the frameworks/tools: Poetry, Manim. Working to be better than Tinder.
                </p>
                <button onclick="location.href = 'https://github.com/ufosc/manim-data-structures';">SOURCE</button>
            </div>
            <div id="card5" class="card">
                <h2>API Group</h2>
                <p id="card5text">Working on several small projects that involve APIs to gain knowledge about building and using them. Built in Python,
                    with FastAPI.
                </p>
                <button onclick="location.href = 'https://github.com/ufosc/UF-API-GROUP';">SOURCE</button>
            </div>
            <button class="portfolio__cards__scroll__btn-left"><img src="./assets/left-swipe-arrow.png" alt="left arrow"></button>
            <button class="portfolio__cards__scroll__btn-right"><img src="./assets/left-swipe-arrow.png" alt="right arrow"></button>
        </div>
    </div>
</div>

修改后的CSS代码 #

.portfolio__cards__scroll {
    overflow-x: hidden;
    overflow-y: hidden;
    display: flex;
    gap: 20px;
    scroll-behavior: smooth;
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio .portfolio__cards {
    position: relative;
    width: 100vw;
    max-width: 1200px;
    overflow: hidden;
    padding: 30px;
}

.portfolio .portfolio__cards__scroll .card {
    padding: 20px;
    border-radius: 20px;
    min-width: 300px;
    max-width: 300px;
    /* 修改为垂直flex布局 */
    display: flex;
    flex-direction: column;
    /* 设置固定高度，确保所有卡片一致，可根据内容调整数值 */
    height: 450px;
    /* 可选：添加样式增强视觉效果 */
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.portfolio .portfolio__cards__scroll .card p {
    /* 可选：文本过长时显示滚动条 */
    overflow-y: auto;
    /* 让文本区域占满卡片剩余空间 */
    flex-grow: 1;
    margin-bottom: 20px;
}

.portfolio .portfolio__cards__scroll .card button {
    background-color: black;
    color: white;
    padding: 10px 30px;
    border-radius: 20px;
    border: none;
    /* 自动推至卡片底部 */
    margin-top: auto;
    /* 可选：按钮左对齐 */
    align-self: flex-start;
}

说明 #

• height: 450px可根据实际内容调整，确保所有卡片高度统一
• flex-grow:1让文本区域填充卡片剩余空间，避免因文本长度不同导致按钮位置偏移
• margin-top:auto是Flex布局中实现元素“贴底”的经典技巧，无需依赖绝对定位
• 若担心内容过长超出卡片，给<p>标签添加overflow-y:auto可实现滚动效果

内容的提问来源于stack exchange，提问作者Teamy