顺风 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 来 algin items。但是这些卡片上也有包装，所以每张卡片上都需要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。