容器中按钮放置的 CSS 问题答案

【问题标题】：CSS Issue with a button placement in a container容器中按钮放置的 CSS 问题
【发布时间】：2022-01-14 07:56:18
【问题描述】：

我目前正在制作一个练习电子商务网站，但我的样式遇到了问题，我不知道如何将按钮附加到产品容器的最底部，以免其他项目过度拉伸。理想情况下，我希望容器能够将内容拉伸并平衡到最长项目的长度。

.card-container {
    max-width: 80%;
    width:  80%;
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 500px;
}

.product-name {
    font-size: 130%;
    font-weight: bold;
    color: black;
}

.image-container {
    width: 80%;
    height: 250px;
}

.description {
    padding: 0 20px;
}

.link {
    text-decoration: none;
}

.item-info {
    line-height: 200%;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    max-width: 300px;
    margin: 2em auto;
    text-align: center;
    font-family: arial;
    width: 100%;
    min-width: 300px;
}

.card img {
    max-width: 250px;
    max-height: 200px;
}

.price {
    font-size: 22px;
}

.card button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

.card button:hover {
    opacity: 0.7;
}

JSX：

import './Home.css'
import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import fetchItems from '../../utils/fetchItems';

export const Home = () => {
    const [ products, setProducts ]= useState([]);

    useEffect(() => {
        (async () => {
            const response = await fetchItems('/products');
            setProducts(response);
        })()
    }, []);    

    return(
        <div>
            <h1>Welcome to Sahara</h1>
            <div className='card-container'>
                {products.map(product => {
                    return(
                            <div className="card">
                                <img src={product.image} alt='product' />
                                <div className='item-info'>
                                    <Link to={`/products/${product.id}`} className='link'><h4 className='product-name'>{product.name}</h4></Link>
                                    <p className='seller'>{product.seller}</p>
                                    <p className='price'>${product.price}</p>
                                    <Link to='/cart'><button>Add to Cart</button></Link>
                                </div>
                                
                            </div>
                    )
                })}  
            </div> 
        </div>
    )
}

任何帮助将不胜感激。谢谢。

【问题讨论】：

标签： javascript html css reactjs jsx

【解决方案1】：

一个简单的方法是将.card position: relative; 和.card button 设置为position: absolute; 类似于以下内容：

.card {
  position: relative;
}

.card button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

【讨论】：

谢谢，问题解决了
我很高兴它成功了！ :)

【解决方案2】：

您可以使用position: absolute; 将按钮与底部对齐。将这些值添加到样式表中：

.card {
    position: relative;
}

.card button {
    position: absolute;
    bottom: 0;
    right: 0;
}

更多信息请参见this question。

【讨论】：

【解决方案3】：

.card {
  position: relative;
}

.card button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。