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

Question

下面的 Tailwindcss 代码在创建相同高度的卡片方面做得很好。

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

我预计将“bottom-0”添加到持有按钮的 div 中会起作用，但我认为问题是“bottom”是相对于其父级的，这不是卡的完整高度。

快速游乐场： https://play.tai​​lwindcss.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

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"