如何在 Tailwind 中正确调整列高？

Question

我正在学习 Tailwind（从 bootstrap 迁移过来），我正在努力弄清楚如何适当调整列高。这里我有一个 2 列布局：

<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
  <div class="w-full h-full">
    <div class="columns-2">
      <div class="rounded p-4 bg-white">
        <h1 class="text-3xl">Box 1</h1>
        <div class="columns-1 space-y-2">
          <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="columns-1 space-y-2">
          <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>
  </div>
</div>

当内容等高时，这呈现得很好。但是，当我缩短其中一列时，如下所示：

<div id="app" class="bg-slate-200 h-screen p-4" data-v-app="">
  <div class="w-full h-full">
    <div class="columns-2">
      <div class="rounded p-4 bg-white">
        <h1 class="text-3xl">Box 1</h1>
        <div class="columns-1 space-y-2">
          <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="columns-1 space-y-2">
          <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>

我得到以下结果：

您可以看到第一列的一些底部填充被其父列不够高切断，并且在第二列的顶部添加了一些额外的填充。这是检查器中框布局的样子：

预期的行为是父 2 列元素将其高度调整到足够高，这样它就不会剪裁较高的列。较短的列也应该顶部对齐，而不会出现奇怪的额外顶部边距。这是一个活生生的例子，任何帮助将不胜感激！ https://jsfiddle.net/xm9g4jfr/1/

Answer 1

columns 属性专为将文本排入多列而设计，因此我不建议在这种情况下使用它。

如果您删除 columns-2 并将其替换为网格布局，grid grid-cols-2 gap-x-6，那应该可以满足您的需求。

https://play.tailwindcss.com/EDzOYOTSnU

Answer 2

您可以为更大的屏幕执行此操作

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="container mx-auto bg-gray-300 p-6">
  <div class="flex flex-col">
    <div class="-mx-4 flex flex-col items-stretch lg:flex-row">
      <div class="flex-1 p-4">
        <div class="block h-full overflow-hidden rounded-lg border bg-white shadow-md transition ease-in-out sm:flex-row">
          <div class="p-4 sm:ml-16 md:ml-32 lg:ml-0">
            <!-- heading -->
            <div class="-mx-2 flex flex-wrap sm:mx-auto sm:mb-2">
              <div class="p-4">
                <h1 class="text-3xl">Box 1</h1>
                <div class="space-y-2">
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 2</button></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="flex-1 p-4">
        <div class="block h-full overflow-hidden rounded-lg border bg-white shadow-md transition ease-in-out hover:cursor-pointer sm:flex-row">
          <div class="p-4 sm:ml-16 md:ml-32 lg:ml-0">
            <!-- heading -->
            <div class="-mx-2 flex flex-wrap sm:mx-auto sm:mb-2">
              <div class="p-4">
                <h1 class="text-3xl">Box 1</h1>
                <div class="space-y-2">
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 2</button></div>
                  <div ><button class="w-96 rounded border border-green-400 p-2 text-green-600">Button 1</button></div>
                  
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

如何在 Tailwind 中正确调整列高？

How to size column height properly in Tailwind?

html

css

tailwind-css