产品卡片按钮错位求助：如何让按钮精准对应卡片下方

问题根源 #

你的.product-card-container采用flex布局，但每个产品卡片(.nft)和按钮都是同级的flex子元素，flex会将它们按横向（或换行）排列，导致按钮无法和对应卡片绑定成一个整体，自然出现偏移。

修复方案 #

把每个卡片和对应的按钮放进独立容器，让这个容器成为flex布局的子项，再通过样式让按钮在容器内居中对齐。

1. 修改HTML结构

给每组卡片+按钮套一个card-wrapper容器：

<div class="product-card-container">
    <!-- 第一组卡片+按钮 -->
    <div class="card-wrapper">
        <div class="nft" onclick="addProd('11', products)" class="card" >
            <div class='main'>
              <img class='tokenImage' src="{{ url_for('static', filename='img/м1.jpg') }}" alt="NFT" />
              <h2>Набор</h2>
              <p class='description'></p>
              <div class='tokenInfo'>
                <div class="price">
                  <ins>◘</ins>
                  <p>499 Руб</p>
                </div>
              </div>
            </div>
         </div>
        <button class="btn-hover color-7">购买</button>
    </div>

    <!-- 第二组卡片+按钮 -->
    <div class="card-wrapper">
        <div class="nft" onclick="addProd('12', products)" class="card" >
            <div class='main'>
              <img class='tokenImage' src="{{ url_for('static', filename='img/м2.jpg') }}" alt="NFT" />
              <h2>Заяц</h2>
              <p class='description'></p>
              <div class='tokenInfo'>
                <div class="price">
                  <ins>◘</ins>
                  <p>179 Руб</p>
                </div>
              </div>
            </div>
         </div>
        <button class="btn-hover color-7">购买</button>
    </div>

    <!-- 第三组卡片+按钮 -->
    <div class="card-wrapper">
        <div class="nft" onclick="addProd('13', products)" class="card" >
            <div class='main'>
              <img class='tokenImage' src="{{ url_for('static', filename='img/м3.jpg') }}" alt="NFT" />
              <h2>Массажка</h2>
              <p class='description'></p>
              <div class='tokenInfo'>
                <div class="price">
                  <ins>◘</ins>
                  <p>179 Руб</p>
                </div>
              </div>
            </div>
         </div>
        <button class="btn-hover color-7">购买</button>
    </div>
 </div>

2. 添加/修改CSS样式

给新的card-wrapper设置样式，同时调整按钮间距：

.product-card-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

/* 新增卡片包装器样式 */
.card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* 让卡片和按钮水平居中对齐 */
  margin: 0 1rem; /* 可选，调整各组之间的横向间距 */
}

.nft {
  /* 保留原有所有样式不变 */
  user-select: none;
  width: 300px;
  margin: 2rem;
  border: 1px solid #ffffff22;
  background-color: #282c34;
  background: linear-gradient(0deg, rgba(40, 44, 52, 1) 0%, rgba(17, 0, 32, .5) 100%);
  box-shadow: 0 7px 20px 5px #00000088;
  border-radius: .7rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  overflow: hidden;
  transition: .5s all;
  /* ... 其他原有样式 */
}

/* 调整按钮margin，避免左右间距导致偏移 */
.btn-hover {
  width: 200px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  height: 55px;
  text-align:center;
  border: none;
  background-size: 300% 100%;
  border-radius: 50px;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  margin: 0 0 2rem 0; /* 仅保留底部margin，去掉左右margin */
}

/* 保留按钮其他原有样式 */
.btn-hover:hover {
  background-position: 100% 0;
  moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

.btn-hover:focus {
  outline: none;
}

.btn-hover.color-7 {
  background-image: linear-gradient(to right, #6253e1, #852D91, #A3A1FF, #F24645);
  box-shadow: 0 4px 15px 0 rgba(126, 52, 161, 0.75);
}

效果说明 #

修改后，每个卡片和按钮会作为一个整体在flex容器中排列，按钮会自动对齐到对应卡片的正下方，彻底解决偏移问题。

内容的提问来源于stack exchange，提问作者SoundestMage