如何在Tailwind中正确设置列高度？

你遇到的问题根源在于使用了columns-2这个CSS多列布局类——它的设计初衷是实现类似报纸的流式文本排版，而非构建等高的网格列。当列内内容高度不一致时，多列布局会自动重排内容，这就导致了你看到的内容截断和异常顶部间距问题。

下面提供两种符合Tailwind设计思路的正确解决方案：

方法一：使用Flexbox布局 #

Flexbox是实现等高列的经典方案，只需要替换布局相关的类即可：

<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
  <div class="w-full h-full">
    <!-- 用flex + gap替代columns-2 -->
    <div class="flex gap-4">
      <div class="rounded p-4 bg-white flex-1">
        <h1 class="text-3xl">Box 1</h1>
        <div class="space-y-2 mt-4">
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
        </div>
      </div>
      <div class="rounded p-4 bg-white flex-1">
        <h1 class="text-3xl">Box 2</h1>
        <div class="space-y-2 mt-4">
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
        </div>
      </div>
    </div>
  </div>
</div>

关键改动说明：

• 用flex gap-4替换columns-2，gap-4用来设置列之间的间距，比依赖内边距更符合布局逻辑
• 给每个子列添加flex-1，让它们自动平分可用宽度，且高度会自动匹配最高列
• 移除了内部冗余的columns-1，改用mt-4设置标题和按钮区域的间距

方法二：使用Grid布局 #

如果你更倾向于直观的网格布局，Grid方案同样适用：

<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
  <div class="w-full h-full">
    <!-- 用grid布局替代columns-2 -->
    <div class="grid grid-cols-2 gap-4">
      <div class="rounded p-4 bg-white">
        <h1 class="text-3xl">Box 1</h1>
        <div class="space-y-2 mt-4">
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 2</button></div>
        </div>
      </div>
      <div class="rounded p-4 bg-white">
        <h1 class="text-3xl">Box 2</h1>
        <div class="space-y-2 mt-4">
          <div class="w-full"><button class="rounded border border-green-400 p-2 text-green-600 w-full">Button 1</button></div>
        </div>
      </div>
    </div>
  </div>
</div>

Grid布局的优势：

• grid-cols-2直接定义两列布局，语法更直观
• 子列默认会与最高列保持等高，无需额外配置
• gap-4统一控制列间距，布局更整洁

两种方案都能实现你想要的效果：父容器会适配最高列的高度，内容不会被截断，同时两列顶部对齐，无异常间距。

内容的提问来源于stack exchange，提问作者A Tyshka