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

Question

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

我已经尝试了参考的不同设置here

我想要对齐的具体 child 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 应用于 parent 元素。

flex - 适用 CSS flexbox

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

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

flex-1 应用 CSS flex: 1，这使得所有 child 元素填充到 parent 的大小；在这种情况下，它会使 children 高度相同。

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

<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

我正在使用 tailwind CSS 和 React。可能对你有帮助。

第一个代码：首先使用 tailwind 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。然后我为 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;

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

Make div align to bottom of column in card tailwind css

javascript

css

multiple-columns

next.js

tailwind-css