Tailwind实现等高并排卡片及移动端自适应问题

要实现卡片等高且按钮始终对齐底部，同时保留移动端响应式效果，只需调整flex布局结构，核心是让卡片容器垂直分布内容，并强制父容器拉伸子元素高度：

• 父容器：移除content-center，添加items-stretch，确保两个卡片被拉伸至相同高度
• 卡片容器：改为垂直flex布局（flex flex-col），让内容可自动分配空间
• 内容区域：给标题+内容的部分添加flex-grow-1，占满卡片剩余高度，将按钮推至底部
• 按钮容器：用mt-auto替代固定mt-12，自动适配剩余空间实现底部对齐

修改后的完整代码：

<div className="bg-gray-300 flex flex-row flex-wrap items-stretch justify-center">
    <!-- 第一张卡片 -->
    <div className="flex flex-col bg-white lg:w-1/2 md:w-full py-4 px-4 sm:px-8 lg:py-20 lg:px-40 z-20">
        <div className="flex-grow-1">
            <h2 className="text-3xl font-extrabold text-black sm:text-4xl text-center">
                <span className="block">Title 1</span>
            </h2>
            <p className="text-black text-lg mt-6">
                <img
                    className="object-contain h-48 w-96"
                    src="/images/logo.png"
                ></img>
                Content 1
            </p>
        </div>
        <div className="lg:flex-shrink-0">
            <div className="mt-auto inline-flex rounded-md shadow">
                <button
                    type="button"
                    className="py-2 px-4 bg-gray-800 hover:bg-gray-700 focus:ring-gray-100 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
                >
                    Button 1
                </button>
            </div>
        </div>
    </div>

    <!-- 第二张卡片 -->
    <div className="flex flex-col bg-white lg:w-1/2 md:w-full py-4 px-4 sm:px-8 lg:py-20 lg:px-40 z-20">
        <div className="flex-grow-1">
            <h2 className="text-3xl font-extrabold text-black sm:text-4xl text-center">
                <span className="block">Title 2</span>
            </h2>
            <p className="text-black text-lg mt-6">
                <img
                    className="object-contain h-48 w-96"
                    src="/images/package.png"
                ></img>
                Content 2
            </p>
        </div>
        <div className="lg:flex-shrink-0">
            <div className="mt-auto px-4 inline-flex rounded-md shadow">
                <button
                    type="button"
                    className="py-2 px-4 bg-gray-800 hover:bg-gray-700 focus:ring-gray-100 focus:ring-offset-blue-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
                >
                    Button 2
                </button>
            </div>
        </div>
    </div>
</div>

关键改动说明： #

1. 父容器：content-center → items-stretch，强制子卡片等高
2. 卡片容器：添加flex flex-col，设置垂直flex布局
3. 内容包裹层：新增div.flex-grow-1，让标题和内容区域占满卡片除按钮外的所有空间
4. 按钮容器：mt-12 → mt-auto，自动将按钮固定在卡片底部

这样修改后，无论卡片内容多少，按钮都会对齐底部，同时移动端卡片依然保持md:w-full，不会破坏响应式全屏效果。

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