Tailwind CSS 中相同高度的卡片

Question

我正在使用顺风CSS。卡片中的数据不一致。例如，有些卡的描述很短，而另一些卡的描述很长。有些卡片包含 1-2 个标签，而其他卡片则包含 5-6 个。我想让所有的卡片都具有相同的高度。有什么办法可以做到这一点吗？

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-6">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full sm:w-1/2 md:w-1/2 xl:w-1/4 p-4">
      <div class="block bg-white overflow-hidden border-2">
        <div class="p-4">
          <h2 class="mt-2 mb-2 font-bold text-2xl font-Headingg">
            Card Name
          </h2>
          <div class="mb-4 flex flex-wrap">
            <span class="mr-2">Link 1</span>
            <span>Link 2</span>
          </div>

          <p class="text-md text-justify">Some Description</p>
        </div>
        <div class="p-4 flex flex-wrap items-center">
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #1</p>
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您使用了弹性盒，因此根据您的代码，您需要仅使用弹性容器来分配项目。items-stretch但这些卡片上也有包装纸，因此h-full每张卡片上也都需要。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">


<div class="container mx-auto p-6">
  <div class="flex items-stretch -mx-4">
    <div class="flex-1 p-4">
      <div class="block bg-white overflow-hidden border-2 h-full">
        <div class="p-4">
          <h2 class="mt-2 mb-2 font-bold text-2xl font-Headingg">
            Card Name
          </h2>
          <div class="mb-4 flex flex-wrap">
            <span class="mr-2">Link 1</span>
            <span>Link 2</span>
          </div>

          <p class="text-md text-justify">Some Description</p>
        </div>
        <div class="p-4 flex flex-wrap items-center">
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #1</p>
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #2</p>
        </div>
      </div>
    </div>
    
    <div class="flex-1 p-4">
      <div class="block bg-white overflow-hidden border-2 h-full">
        <div class="p-4">
          <h2 class="mt-2 mb-2 font-bold text-2xl font-Headingg">
            Card Name
          </h2>
          <div class="mb-4 flex flex-wrap">
            <span class="mr-2">Link 1</span>
            <span>Link 2</span>
          </div>

          <p class="text-md text-justify">Some Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel enim lectus.</p>
        </div>
        <div class="p-4 flex flex-wrap items-center">
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #1</p>
          <p class="px-1 py-2 tracking-wide text-xs mr-2 mb-2">Tag #2</p>
        </div>
      </div>
    </div>
  </div>
</div>

我删除了所有响应式宽度和换行，以使其在此处的预览下工作。

网格

上面使用 Flexboxes 的解决方案将起作用，但对于您的情况（卡片），您确实想使用grid。它将解决您的所有问题并使代码更短。

Flex 对卡片内容很有帮助。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="container mx-auto p-6 grid grid-cols-2 gap-4">
  <div class="col-span-1 flex flex-col bg-white border-2 p-4">
    <h2 class="mb-2 font-bold text-2xl">
      Card Name
    </h2>
    <div class="mb-4 flex flex-wrap">
        <span class="mr-2">Link 1</span>
        <span class="mr-2">Link 2</span>
    </div>
    <p class="text-md text-justify">Some Description</p>
    <div class="flex flex-wrap mt-auto pt-3 text-xs">
      <p class="mr-2 mb-2">Tag #1</p>
      <p class="mr-2 mb-2">Tag #2</p>
    </div>
  </div>
  <div class="col-span-1 flex flex-col bg-white border-2 p-4">
    <h2 class="mb-2 font-bold text-2xl">
      Card Name
    </h2>
    <div class="mb-4 flex flex-wrap">
        <span class="mr-2">Link 1</span>
        <span class="mr-2">Link 2</span>
    </div>
    <p class="text-md text-justify">Some Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel enim lectus.</p>
    <div class="flex flex-wrap mt-auto pt-3 text-xs">
      <p class="mr-2 mb-2">Tag #1</p>
      <p class="mr-2 mb-2">Tag #2</p>
    </div>
  </div>
</div>

现在只需添加响应式grid-cols-xxx或col-span-xxx根据您的需求即可。