在 TailwindCss 中，如何将按钮放在具有不同内容高度的并排 div 的底部

Question

下面的 Tailwindcss 代码可以很好地创建相同高度的卡片。

如何让所有 3 个按钮与每张卡片的底部对齐？

我预计将“bottom-0”添加到 div 按住按钮会起作用，但我认为问题是“bottom”与其父级相关，而不是卡的全高.

快速游乐场： https://play.tailwindcss.com/SX4Yu2OT3f

    .p-10.grid.grid-cols-1.sm:grid-cols-1.md:grid-cols-3.lg:grid-cols-3.xl:grid-cols-3.gap-5
      / Card 1
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 1
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint.  
        .px-6.pt-4.pb-2.text-left
          = link_to "learn more", "#", class: "btn btn-small btn-tertiary"
      / Card 2
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 2
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, 
        .px-6.pt-4.pb-2.text-center
          = link_to "try it!", "#", class: "btn btn-small btn-primary"
      / Card 3
      .rounded.overflow-hidden.shadow-lg.bg-white
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 3
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. 

        .px-6.pt-4.pb-2.text-right
          = link_to "find it", "#", class: "btn btn-small btn-secondary"

Answer 1

将相对位置 class 赋予包装盒

.rounded.overflow-hidden.shadow-lg.bg-white.relative

然后将 position-absolute 和 bottom-0 设置为您的按钮

      = link_to "learn more", "#", class: "btn btn-small btn-tertiary bottom-0 absolute"

Answer 2

给你的卡片 flex flex-col 类和按钮包装器 mt-auto

.p-10.grid.grid-cols-1.sm:grid-cols-1.md:grid-cols-3.lg:grid-cols-3.xl:grid-cols-3.gap-5
      / Card 1
      .rounded.overflow-hidden.shadow-lg.bg-white.flex.flex-col
        = image_tag "http://via.placeholder.com/640x360", class: "w-full"
        .px-6.py-4
          .font-bold.text-xl.mb-2 Tagline 1
          %p.text-gray-700.text-base
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non recusandae, commodi repudiandae exercitationem, architecto assumenda nobis doloribus, deleniti obcaecati quaerat at quam! Rerum vitae quam culpa! Voluptates dolore sint.  
        .px-6.pt-4.pb-2.text-left.mt-auto
          = link_to "learn more", "#", class: "btn btn-small btn-tertiary"

在 TailwindCss 中，如何将按钮放在具有不同内容高度的并排 div 的底部

in TailwindCss how put buttons at bottom of wide-by-side divs with different content heights

vertical-alignment

tailwind-css