Tailwind：等高柱

Question

我有 3 列，每列包含一个人的形象、姓名、职能和引述。我希望所有 3 列的高度都相等。

到目前为止，我已经尝试设置 p class="flex-1" 但什么也没做，我还将第二个内部 div 更改为 class="flex flex-1 p-6 gap-y-4”。这确实使列的高度相等，但它使 div 成为一行而不是列，如果我将 flex-1 与 flex-col 一起使用，它不会将列设置为相等的高度。

如何在不使用顺风静态高度的情况下实现上述行为？

HTML

<div class="flex flex-col">
    <div class="w-full">
        <img class="h-full w-full" [src]="'/api'" alt="employee image">
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300">
        <h3 class="text-3xl font-bold text-white">{{employee?.name}}</h3>
        <h4 class="text-lg uppercase text-black">{{employee?.function}}</h4>
        <p class="text-center text-xl font-bold text-black" [innerHtml]="employee?.quote"></p>
    </div>
</div>

Answer 1

您应该使用实用程序类 grid and grid-cols-3 来创建所需的布局。

您可以在下方找到基于您发送的代码的代码示例。顺便说一句，对于您以后可能会提出的有关堆栈溢出的问题，请注意，好的做法是共享实际有效的代码，即自包含的代码，最好是在代码片段中。因此，您的代码引用了您的代码中未包含的图像和员工对象。

<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-3 gap-3">
  <div class="flex flex-col">
    <div>
      <div class="h-20 bg-slate-400">Image</div>
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
      <h3 class="text-3xl font-bold text-white">Employee Name</h3>
      <h4 class="text-lg uppercase text-black">Employee Function</h4>
      <p class="text-center text-xl font-bold text-black">Employee Quote</p>
    </div>
  </div>
  <div class="flex flex-col">
    <div>
      <div class="h-20 bg-slate-400">Image</div>
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
      <h3 class="text-3xl font-bold text-white">Employee Name</h3>
      <h4 class="text-lg uppercase text-black">Employee Function</h4>
      <p class="text-center text-xl font-bold text-black">Employee Quote</p>
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
      <h3 class="text-3xl font-bold text-white">Employee Name</h3>
      <h4 class="text-lg uppercase text-black">Employee Function</h4>
      <p class="text-center text-xl font-bold text-black">Employee Quote</p>
    </div>
  </div>
  <div class="flex flex-col">
    <div>
      <div class="h-20 bg-slate-400">Image</div>
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
      <h3 class="text-3xl font-bold text-white">Employee Name</h3>
      <h4 class="text-lg uppercase text-black">Employee Function</h4>
      <p class="text-center text-xl font-bold text-black">Employee Quote</p>
    </div>
  </div>
</div>

编辑：根据 OP 的评论，我将 flex-auto 添加到员工卡中，以便它可以根据需要增长以匹配其他列的高度。本质上，网格中的所有列都具有相同的高度，如果您希望相同的元素占据所有可能的高度，则只需让它的内部元素增长。

Answer 2

您可以使用 flex 包装器而不是使用 grid 并指定列数。

<script src="https://cdn.tailwindcss.com"></script>

<div class="flex gap-3">
  <div class="flex flex-col w-full">
    <div>
      <div class="h-20 bg-slate-400">Image</div>
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
      <h3 class="text-3xl font-bold text-white">Employee Name</h3>
      <h4 class="text-lg uppercase text-black">Employee Function</h4>
      <p class="text-center text-xl font-bold text-black">Employee Quote</p>
    </div>
  </div>
  <div class="flex flex-col w-full">
    <div>
      <div class="h-20 bg-slate-400">Image</div>
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
      <h3 class="text-3xl font-bold text-white">Employee Name</h3>
      <h4 class="text-lg uppercase text-black">Employee Function</h4>
      <p class="text-center text-xl font-bold text-black">Employee Quote</p>
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
      <h3 class="text-3xl font-bold text-white">Employee Name</h3>
      <h4 class="text-lg uppercase text-black">Employee Function</h4>
      <p class="text-center text-xl font-bold text-black">Employee Quote</p>
    </div>
  </div>
  <div class="flex flex-col w-full">
    <div>
      <div class="h-20 bg-slate-400">Image</div>
    </div>
    <div class="flex flex-col p-6 gap-y-4 text-center bg-indigo-300 flex-auto">
      <h3 class="text-3xl font-bold text-white">Employee Name</h3>
      <h4 class="text-lg uppercase text-black">Employee Function</h4>
      <p class="text-center text-xl font-bold text-black">Employee Quote</p>
    </div>
  </div>
</div>

Tailwind：等高柱

Tailwind: equal height columns

html

css

flexbox

tailwind-css