Tailwind css：对齐父div的元素底部答案

【问题标题】：Tailwind css: align element bottom of parent divTailwind css：对齐父div的元素底部
【发布时间】：2021-06-12 03:55:00
【问题描述】：

<div class="grid grid-cols-5 gap-4">
  <div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">
                <div class="flex px-3 pt-1 justify-end">
                  <a class="underline italic" href="desc.html" title="Description">More</a>
                </div>
                <a class="cursor-pointer" href="www.www.com">
                  <img src="img/img.JPG" />
                </a>
                <div class="flex w-full justify-evenly mt-1 mb-4">
                  <a href="www.www.com class="bg-green-700 hover:bg-green-800 text-white font-bold py-1 px-4 rounded">
                    Button
                  </a>
                </div>
              </div>
  <div class="overflow-hidden border hover:rounded-lg hover:shadow-lg justify-evenly">

  </div>
  ...

</div>

我有多个网格单元格。每个单元格都包含图像。在图像下有一个按钮。当前按钮位于图像下方。但是，图像的高度不同。所以这些按钮没有对齐。我想知道如何将这些按钮放在每个单元格的底部？？

我尝试在按钮包装器上添加align-bottom，但没有帮助。

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

只需要玩h-# flex flex-col justify-*。见working demo。

<div class="grid grid-cols-3">
  <div class="col-span-1 h-96 flex flex-col justify-between">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" class="h-full bg-cover bg-center" />
    <button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
  </div>
  <div class="col-span-1 h-96 flex flex-col justify-between">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" class="h-3/5 bg-cover bg-center" />
    <button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
  </div>
  <div class="col-span-1 h-96 flex flex-col justify-between">
    <img src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png" class="h-3/4 bg-cover bg-center" />
    <button class="w-24 px-4 py-2 bg-gray-200 rounded-lg">Button</button>
  </div>
</div>

【讨论】：

【解决方案2】：

我看到了以下变化：

卡片 div 应该是一个 flex 列，包含类 flex 和 flex-col 以及 justify-between。这个每个子元素将垂直定位，因此它们之间有相同的空间
将img和more链接包裹在一个div中，这样img和more之间的空间就不会那么大了

【讨论】：