如何让Astro中Daisy UI的同行卡片组件垂直高度一致

问题描述 #

使用Astro静态站点生成器搭配Daisy UI搭建博客时，同行的Daisy UI卡片会因内容长度不同出现高度不一致的情况，希望内容较少的卡片能自动拉伸至同行最高卡片的高度，保证UI统一。

问题截图 #

当前卡片组件代码 #

<article class="m-2">
  <div class="card card-bordered w-96 bg-base-100 border-yellow-600">
    <figure><img src="https://placeimg.com/400/225/arch" alt={post.frontmatter.title.split(" ").splice(0,4).join(" ")}/></figure>
    <div class="card-body">
      <h1 class="card-title">{post.frontmatter.title}</h1>
      <p>{post.frontmatter.description.split(" ").splice(0,4).join(" ")}</p>
      <div class="card-actions justify-end">
        <a href={post.url}><button class="btn btn-primary">Read More....</button></a>
      </div>
    </div>
  </div>
</article>

解决方案 #

基于Tailwind CSS（Daisy UI的底层框架）的布局特性，通过以下两步修改即可实现同行卡片等高：

1. 给卡片父容器添加网格布局类 #

确保所有卡片的外层容器（包裹所有<article>的元素）使用网格布局，网格项会自动适配同行最高元素的高度：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <!-- 所有卡片<article>都放置在此容器内 -->
</div>

• grid-cols-1 md:grid-cols-2 lg:grid-cols-3：设置响应式列数，移动端1列、平板2列、桌面端3列，可根据需求调整列数
• gap-4：设置卡片之间的间距

2. 修改卡片组件样式 #

调整卡片和内容区的类，让卡片占满父容器高度，并让内容自动分布：

<article class="m-2">
  <div class="card card-bordered w-full h-full bg-base-100 border-yellow-600">
    <figure><img src="https://placeimg.com/400/225/arch" alt={post.frontmatter.title.split(" ").splice(0,4).join(" ")}/></figure>
    <div class="card-body flex flex-col justify-between">
      <div>
        <h1 class="card-title">{post.frontmatter.title}</h1>
        <p>{post.frontmatter.description.split(" ").splice(0,4).join(" ")}</p>
      </div>
      <div class="card-actions justify-end">
        <a href={post.url}><button class="btn btn-primary">Read More....</button></a>
      </div>
    </div>
  </div>
</article>

关键修改点：

• w-full h-full：让卡片宽度占满网格项，高度填满网格项的高度（网格项已自动等高）
• flex flex-col justify-between：将card-body改为垂直flex布局，让标题描述区和底部按钮栏自动分布，按钮栏固定在卡片底部，内容区自动填充剩余空间

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