TailwindCSS 中画廊卡片的大小相同

Posted 2023-02-22

【中文标题】TailwindCSS 中画廊卡片的大小相同

【英文标题】：Same size on gallery cards in TailwindCSS

【发布时间】：2022-01-16 12:16:22

【问题描述】：

我在带有 React 的 Tailwind CSS 中有一个图片库。它看起来像这样：

每个图像组件都是这样定义的：

<div className="flex items-center">
      <div className="rounded overflow-hidden shadow-lg">
        <img
          className="w-full h-48 object-cover"
          src=img
          loading="lazy"
          alt=""
        />

        <div className="p-6">
          <div className="flex items-baseline">
            <div className="">name</div>
          </div>
        </div>
      </div>
    </div>

它已加载到此容器中：

<div className="grid gap-6 mb-8 md:grid-cols-2 xl:grid-cols-4">
images.map(img => <ImageComponent ..../>)
</div>

如您所见，说明使卡片比其他卡片更长。 如何让同一行中的卡片大小不变而不剪字？

我正在使用"tailwindcss": "1.4.6"

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example

【参考方案1】：

我之前已经解决了这个问题，方法是将卡片内容放在flex-column 中，并通过给它flex-1 来拉伸内容区域以填充弹性。例如：

<div className="rounded overflow-hidden shadow-lg">
  <div className="flex flex-column">
    <img
      className="w-full h-48 object-cover"
      src=img
      loading="lazy"
      alt=""
    />

    <div className="flex-1 p-6">
      <div className="">name</div>
    </div>
  </div>
</div>