Tailwind CSS中相同高度的卡片

Question

我正在使用tailwind 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>

- gothamdarkknight

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>

我去掉了所有响应式宽度和包装，以使其在此处预览中正常工作。

网格

上面的解决方案使用flexbox可以工作，但对于你的情况（卡片），你真的想使用网格。它将解决您所有的问题并使代码更短。

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即可。

- chojnicki

---

你是如何使卡片的高度相同的？我看到你的描述不同，但是高度是一样的，并且标签在两张卡片上的位置都固定。 - tanjim anim

Answer 2

最好的解决方案，我个人认为，是使用grid和auto-rows-fr。

所以，你会有：

<div class="grid auto-rows-fr grid-cols-3 gap-2">
<!-------------- ^^^^^^^^^^^^ this part is important -->

  <div class="rounded bg-slate-100 p-3">This has some content.</div>
  <div class="rounded bg-slate-100 p-3">
    This has more content so that its significantly larger than the other
    items. Yet all items, even the one in the new line will grow to the
    size of the highest container.
  </div>
  <div class="rounded bg-slate-100 p-3">More content.</div>
  <div class="rounded bg-slate-100 p-3">First item in new line.</div>
</div>

- Leon Vogler