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

Question

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

我已经尝试过引用here的不同设置

我想要对齐的特定子 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 flexbox

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

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>

Answer 2

我正在使用带有反应的顺风 CSS。它可能会对你有所帮助。

第一个代码： 首先使用顺风 CSS 网格概念迭代从 useEffect 部分获取数据。我将 3 列用于大型设备，2 列用于中型设备，1 列用于小型设备。

import React, { useEffect, useState } from 'react';
import SellingCard from '../SellingCard/SellingCard';

const BestSelling = () => {
    const [products, setProducts] = useState([]);
    useEffect(() => {
        fetch('data.json')
            .then((res) => res.json())
            .then((data) => setProducts(data));
    }, []);
    return (
        <div
            style={{ maxWidth: '1300px' }}
            className="my-10 md:my-20 mx-auto container px-4"
        >
            <h4 className="text-center text-lg font-normal text-red-500 my-2">
                CHECK IT OUT
            </h4>
            <h1 className="text-center text-4xl md:text-5xl font-mono tracking-wide font-bold">
                Best Sellers
            </h1>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                {products.slice(0, 6).map((product) => (
                    <SellingCard key={product.id} product={product} />
                ))}
            </div>
        </div>
    );
};

export default BestSelling;

第二个代码： 我只是给卡片一个固定的高度 ["style={{ height: '500px' }}"] 并使卡片的显示属性“relative”为主分区。然后我为我只想在卡片底部修复的 div a 添加了显示“absolute”和“bottom-0”。

import React from 'react';

const SellingCard = (props) => {
    const { img, name, price, quantity, sup_name, des } = props.product;
    return (
        <>
            <div>
                <div
                    style={{ height: '500px' }}
                    className="rounded relative shadow-sm"
                >
                    <img
                        className="h-60 rounded w-full object-cover object-center mb-6"
                        src="https://dummyimage.com/722x402"
                        alt="content"
                    />
                    <h3 className="tracking-widest text-red-500 text-xs font-medium title-font">
                        Suplier: {sup_name}
                    </h3>
                    <h2 className="text-lg text-gray-900 font-medium title-font mb-4">
                        {name}
                    </h2>
                    <p className="leading-relaxed text-base mb-2 flex-1">
                        {des.slice(0, 150)}
                    </p>
                    <div className="absolute bottom-0 w-full">
                        <div className="flex justify-between items-center relative bottom-0 text-red-600 text-lg font-bold mb-2">
                            <p>Price: {price}</p>
                            <p>Items Left: {quantity}</p>
                        </div>
                        <button className="w-full text-center bg-blue-600 py-2 rounded text-white font-bold hover:bg-blue-800">
                            Update This Product
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
};

export default SellingCard;