小编got*_*ght的帖子

Tailwind CSS 中相同高度的卡片

我正在使用顺风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>
Run Code Online (Sandbox Code Playgroud)

css tailwind-css

16
推荐指数
1
解决办法
5万
查看次数

标签 统计

css ×1

tailwind-css ×1