顺风：等高列

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

您可以使用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>

Answer 2

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

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

<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 添加到员工卡中，以便在需要时可以增长以匹配其他列的高度。本质上，网格中的所有列都具有相同的高度，如果您希望相同的列占据所有可能的高度，您只需要让其内部元素增长。