时间戳

首页 > 解决方案 > 如何使用绝对属性将 div 定位在另一个的底部

html - 如何使用绝对属性将 div 定位在另一个的底部

问题描述

JSX：

<div className="card">
      <div className="inner">
        <div className="card-content">
          <div className="title">
            <Link to={`/product/${_id}`}>{name}</Link>
          </div>

          <div className="img">
            <img src={image} alt="" />
          </div>
        </div>
        <div className="card-price">
          <div className="price">{displayPrice(price)}</div>
          <div className="cart float-right">
            <ShoppingCart size={28} className="shopping-icon" />
          </div>
        </div>
        <Rating rating={rating} numReviews={numReviews} />
        <hr className="descriptionBreak" data-content="About" />
        <div className="card-footer">
          <p className="description">{shortDescription}</p>
          <div className="label-container">
            {labels?.map((label, index) => (
              <div key={index} className="label">
                {label}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>

相关CSS：

.label-container {
    display:flex;
    justify-content: space-evenly;
}

.label {
    padding: 0.4em 1.3em;
    border-radius: 15px;
    background-color: #FFEAF6;
    color:#C62A82;
    font-family: monospace;
    font-size: 1.2em;
    text-transform: capitalize;
}

.inner {
    padding: 20px;
}

卡片图片

正如您从上图中看到的那样，卡片排成一行，但我希望每张卡片的标签从底部平均放置，此时描述在不同点完成，导致空白位于标签下方，而不是在上面。如果我使用绝对定位，那么在某些点重叠文本会出现问题，还有其他方法吗？

标签： htmlcssreactjscss-position

解决方案

使用display:flex并将方向flex-direction:column设置为将方向设置为列，然后space-between在justify-content卡片 div 上使用。这会将列中的较低元素推到底部。

推荐阅读