使 div 与卡顺风 CSS 中的列底部对齐

Question

正如标题所述，我试图使用 Tailwind CSS 使父 div 中的 div 跨列对齐。但是，由于上传到每列的图像大小不同，它们没有对齐。我不想调整图像大小。我用红色圈出了我想要在底部对齐的 div。Github 仓库

我尝试过此处引用的不同设置

我想要对齐的特定子 div 来自<div className="p-4 bg-black">

我想知道是否有人可以提供帮助？

return (
<div className="flex justify-end">
  <div className="px-4" style={{ maxWidth: '1600px' }}>
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-4">
      {
        nfts.map((nft, i) => (
          <div key={i} className="border shadow rounded-xl overflow-hidden">
            <img src={nft.image} />
            <div className="p-4">
              <p style={{ height: '64px' }} className="text-2xl font-semibold">{nft.name}</p>
            <div style={{ height: '70px', overflow: 'hidden' }}>
              <p className="text-gray-400">{nft.description}</p>
              </div>
            </div>
            <div className="p-4 bg-black">
              <p className="text-2xl mb-4 font-bold text-white">{nft.price} Matic</p>
              <button className="w-full bg-pink-500 text-white font-bold py-2 px-12 rounded"
              onClick={() => buyNft(nft)}>Buy</button>
              </div>
          </div>
        ))
      }
    </div>
  </div>
</div>

) }

Answer 1

您可以将顶部内容包装在一个元素中，并将 CSS 应用于flexbox父元素。

flex- 应用 CSS弹性盒

flex-col应用 CSS flex-direction:垂直堆叠子元素的列

justify-between应用 CSS justify-content: space- Between，告诉元素均匀分布子元素。第一个和最后一个子元素将位于父元素的最远端（开始和结束）。由于元素有flex-col，两端将是元素的顶部和底部。

flex-1应用 CSS flex: 1，这使得所有子元素填充到父元素的大小；在这种情况下，它将使孩子们的身高相同。

将详细信息和图像对齐到顶部，将购买信息对齐到底部

<div className="flex flex-1 flex-col justify-between">
 <div>//must wrap content to be aligned to top
  <img src={image} />
  <p>{nft.name}<p>
  <p>{description}</p>
 </div>
 <div>//must wrap content to be aligned to bottom
  <p>{price} Matic</p>
  <button>Buy</button>
 </div>
</div>

附加示例 - 所有图像位于顶部，所有内容位于底部

<div className="flex flex-1 flex-col justify-between">
 <img src={image} /> // aligned top
 <div>// aligned bottom
  <p>{name}<p>
  <p>{description}</p>
  <p>{price} Matic</p>
  <button>Buy</button>
 </div>
</div>