Position 元素到带有tailwindcss的div的底部

Question

我在为我的投资组合编写代码时遇到了这个问题。 我想 position 我的两个按钮（如下图所示）到育儿 div 的底部。 我还希望两个按钮的 alignment 相同（在育儿 div 的中间）。 就在底部。 https://i.stack.imgur.com/T6Mmg.png

这是只有一个 div 的代码。

<div className='md:flex justify-center'>
        <div className='m-2 p-4 bg-gray-100 border-2 border-gray-300 rounded-lg max-w-md shadow-xl mx-auto md:mx-4 hover:scale-105 duration-150 group'>
            <div className='flex justify-between'>
                <h1 className='font-bold text-xl'>The[Creators] - NFT Homepage</h1>
                <a href="https://thecreatorsnft.com" target='_blank' rel="noreferrer"><img src={tcLogo} alt="thecreatorslogo" className='w-14 hover:rotate-12 duration-150' /></a>
            </div>
            <p className='py-2'>My first Project was a Homepage, which contains infos about <a href="https://www.janlampert.com" rel="noreferrer" className='text-nevBlue underline font-bold' target="_blank">Jan Lampert's</a> and my NFT Collections. You can find the Link down here 👇.</p>
            <div className='flex bottom-4 items-end md:scale-0 group-hover:scale-100 duration-150'>
                <button className='mx-auto rounded-xl bg-cyan-400 hover:shadow-lg hover:shadow-cyan-600 duration-300 py-4 px-6 font-bold text-xl'><a href="https://github.com/nevthereal/TheCreators" target="_blank" rel="noreferrer">Github</a></button>
                <button className='mx-auto rounded-xl bg-pink-400 hover:shadow-lg hover:shadow-pink-600 duration-300 py-4 px-6 font-bold text-xl'><a href="https://thecreatorsnft.com" target='blank'>Website</a></button>
            </div>
        </div>

Answer 1

这是一个可以在这里工作的可能解决方案，请记住，它们有很多方法可以解决这个问题； 一般来说，你有很多重复的代码，我会尝试找到一些动态创建组件的方法——例如，项目的框和页脚中的链接。

解决方案：

在项目的容器上应用flex和flex-col 。 然后应用justify-between在元素之间创建这种间距：

flex flex-col justify-between

顺风玩这个例子

如果您不想在 header 和您的段落之间有间距，您可以用它们两个创建另一个容器。 为简单起见，我还将为每个容器提供 flex 实用程序：

<div class="flex flex-col">
   <-- Your header and paragraph elements --!>
</div>

您可以使用所需的特定间隙来设置您想要的样式：

顺风玩这个例子

请注意，我在每个容器上添加了 class md:w-1/3 （在第二个容器上为每个项目提供相同的宽度。您可能不需要它；您可以通过许多其他方式对其进行样式设置。