卡要涨了

Question

我有一些产品卡。当您添加 5 张牌时，它们会排成一排，当您添加第六张牌时，它们会开始一次升起一张。我已经查看了所有代码，但我无法弄清楚我的问题是什么。我请求你的帮助。ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ ㅤㅤㅤㅤㅤㅤㅤㅤ

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

.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;
  .wrapper li {
    margin: 10px 5px;
  }
  hr {
    width: 100%;
    border: none;
    border-bottom: 1px solid #88888855;
    margin-top: 0;
  }
  ins {
    text-decoration: none;
  }
  .main {
    width: 90%;
    padding: 1rem;
    color: #c572e6;
    display: flex;
    flex-direction: column;
    .tokenImage {
      border-radius: .5rem;
      max-width: 100%;
      height: 250px;
      object-fit: cover;
    }
    .description {
      min-height: 100px;
      max-height: 100px;
      margin: .5rem 0;
      color: #a89ec9;
    }
    .creator {
      display: flex;
      align-items: center;
      margin-top: .2rem;
      margin-bottom: -.3rem;
      ins {
        color: #a89ec9;
        text-decoration: none;
      }
      .wrapper {
        display: flex;
        align-items: center;
        border: 1px solid #ffffff22;
        padding: .3rem;
        margin: 0;
        margin-right: .5rem;
        border-radius: 100%;
        box-shadow: inset 0 0 0 4px #000000aa;
        img {
          border-radius: 100%;
          border: 1px solid #ffffff22;
          width: 2rem;
          height: 2rem;
          object-fit: cover;
          margin: 0;
        }
      }
    }
  }
   ::before {
    position: fixed;
    content: "";
    box-shadow: 0 0 100px 40px #ffffff08;
    top: -10%;
    left: -100%;
    transform: rotate(-45deg);
    height: 60rem;
    transition: .7s all;
  }
  &:hover {
    border: 1px solid #ffffff44;
    box-shadow: 0 7px 50px 10px #000000aa;
    transform: scale(1.015);
    filter: brightness(1.3);
     ::before {
      filter: brightness(.5);
      top: -100%;
      left: 200%;
    }
  }
}

.bg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  h1 {
    font-size: 20rem;
    filter: opacity(0.5);
  }
}

 <div class="product-card-container">
            <div class="nft">
                    <div class='main'>
                      <img class='tokenImage' src="${productData.image}" alt="NFT" />
                      <h2 class="name-prod">${productData.name}</h2>
                      <div class='tokenInfo'>
                        <div class="price">
                          <p>${productData.price} руб</p>
                        </div>
                      </div>
                      <div class="unit">
                         <button class="less">-</button>
                         <p class="unit-txt">${productData.quantity}</p>
                         <button class="more">+</button>
                      </div>
                    </div>
            </div>
             <div class="product-card-container">
            <div class="nft">
                    <div class='main'>
                      <img class='tokenImage' src="${productData.image}" alt="NFT" />
                      <h2 class="name-prod">${productData.name}</h2>
                      <div class='tokenInfo'>
                        <div class="price">
                          <p>${productData.price} руб</p>
                        </div>
                      </div>
                      <div class="unit">
                         <button class="less">-</button>
                         <p class="unit-txt">${productData.quantity}</p>
                         <button class="more">+</button>
                      </div>
                    </div>
            </div>
             <div class="product-card-container">
            <div class="nft">
                    <div class='main'>
                      <img class='tokenImage' src="${productData.image}" alt="NFT" />
                      <h2 class="name-prod">${productData.name}</h2>
                      <div class='tokenInfo'>
                        <div class="price">
                          <p>${productData.price} руб</p>
                        </div>
                      </div>
                      <div class="unit">
                         <button class="less">-</button>
                         <p class="unit-txt">${productData.quantity}</p>
                         <button class="more">+</button>
                      </div>
                    </div>
            </div>
             <div class="product-card-container">
            <div class="nft">
                    <div class='main'>
                      <img class='tokenImage' src="${productData.image}" alt="NFT" />
                      <h2 class="name-prod">${productData.name}</h2>
                      <div class='tokenInfo'>
                        <div class="price">
                          <p>${productData.price} руб</p>
                        </div>
                      </div>
                      <div class="unit">
                         <button class="less">-</button>
                         <p class="unit-txt">${productData.quantity}</p>
                         <button class="more">+</button>
                      </div>
                    </div>
            </div>
             <div class="product-card-container">
            <div class="nft">
                    <div class='main'>
                      <img class='tokenImage' src="${productData.image}" alt="NFT" />
                      <h2 class="name-prod">${productData.name}</h2>
                      <div class='tokenInfo'>
                        <div class="price">
                          <p>${productData.price} руб</p>
                        </div>
                      </div>
                      <div class="unit">
                         <button class="less">-</button>
                         <p class="unit-txt">${productData.quantity}</p>
                         <button class="more">+</button>
                      </div>
                    </div>
            </div>
             <div class="product-card-container">
            <div class="nft">
                    <div class='main'>
                      <img class='tokenImage' src="${productData.image}" alt="NFT" />
                      <h2 class="name-prod">${productData.name}</h2>
                      <div class='tokenInfo'>
                        <div class="price">
                          <p>${productData.price} руб</p>
                        </div>
                      </div>
                      <div class="unit">
                         <button class="less">-</button>
                         <p class="unit-txt">${productData.quantity}</p>
                         <button class="more">+</button>
                      </div>
                    </div>
            </div>
             <div class="product-card-container">
            <div class="nft">
                    <div class='main'>
                      <img class='tokenImage' src="${productData.image}" alt="NFT" />
                      <h2 class="name-prod">${productData.name}</h2>
                      <div class='tokenInfo'>
                        <div class="price">
                          <p>${productData.price} руб</p>
                        </div>
                      </div>
                      <div class="unit">
                         <button class="less">-</button>
                         <p class="unit-txt">${productData.quantity}</p>
                         <button class="more">+</button>
                      </div>
                    </div>
            </div>

Answer 1

你的问题是这样的：每个人的第一件事

<div class="product-card-container">

您没有创建结束

div

标签。

其次，您必须将所有产品包裹在包装纸中

div

，其设计如下：

 #container {
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
 }

完整代码如下：

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

    .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;

        .wrapper li {
            margin: 10px 5px;
        }

        hr {
            width: 100%;
            border: none;
            border-bottom: 1px solid #88888855;
            margin-top: 0;
        }

        ins {
            text-decoration: none;
        }

        .main {
            width: 90%;
            padding: 1rem;
            color: #c572e6;
            display: flex;
            flex-direction: column;

            .tokenImage {
                border-radius: .5rem;
                max-width: 100%;
                height: 250px;
                object-fit: cover;
            }

            .description {
                min-height: 100px;
                max-height: 100px;
                margin: .5rem 0;
                color: #a89ec9;
            }

            .creator {
                display: flex;
                align-items: center;
                margin-top: .2rem;
                margin-bottom: -.3rem;

                ins {
                    color: #a89ec9;
                    text-decoration: none;
                }

                .wrapper {
                    display: flex;
                    align-items: center;
                    border: 1px solid #ffffff22;
                    padding: .3rem;
                    margin: 0;
                    margin-right: .5rem;
                    border-radius: 100%;
                    box-shadow: inset 0 0 0 4px #000000aa;

                    img {
                        border-radius: 100%;
                        border: 1px solid #ffffff22;
                        width: 2rem;
                        height: 2rem;
                        object-fit: cover;
                        margin: 0;
                    }
                }
            }
        }

        ::before {
            position: fixed;
            content: "";
            box-shadow: 0 0 100px 40px #ffffff08;
            top: -10%;
            left: -100%;
            transform: rotate(-45deg);
            height: 60rem;
            transition: .7s all;
        }

        &:hover {
            border: 1px solid #ffffff44;
            box-shadow: 0 7px 50px 10px #000000aa;
            transform: scale(1.015);
            filter: brightness(1.3);

            ::before {
                filter: brightness(.5);
                top: -100%;
                left: 200%;
            }
        }
    }

    .bg {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        h1 {
            font-size: 20rem;
            filter: opacity(0.5);
        }
    }

    #container {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <div class="product-card-container">
            <div class="nft">
                <div class='main'>
                    <img class='tokenImage' src="${productData.image}" alt="NFT" />
                    <h2 class="name-prod">${productData.name}</h2>
                    <div class='tokenInfo'>
                        <div class="price">
                            <p>${productData.price} руб</p>
                        </div>
                    </div>
                    <div class="unit">
                        <button class="less">-</button>
                        <p class="unit-txt">${productData.quantity}</p>
                        <button class="more">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-card-container">
            <div class="nft">
                <div class='main'>
                    <img class='tokenImage' src="${productData.image}" alt="NFT" />
                    <h2 class="name-prod">${productData.name}</h2>
                    <div class='tokenInfo'>
                        <div class="price">
                            <p>${productData.price} руб</p>
                        </div>
                    </div>
                    <div class="unit">
                        <button class="less">-</button>
                        <p class="unit-txt">${productData.quantity}</p>
                        <button class="more">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-card-container">
            <div class="nft">
                <div class='main'>
                    <img class='tokenImage' src="${productData.image}" alt="NFT" />
                    <h2 class="name-prod">${productData.name}</h2>
                    <div class='tokenInfo'>
                        <div class="price">
                            <p>${productData.price} руб</p>
                        </div>
                    </div>
                    <div class="unit">
                        <button class="less">-</button>
                        <p class="unit-txt">${productData.quantity}</p>
                        <button class="more">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-card-container">
            <div class="nft">
                <div class='main'>
                    <img class='tokenImage' src="${productData.image}" alt="NFT" />
                    <h2 class="name-prod">${productData.name}</h2>
                    <div class='tokenInfo'>
                        <div class="price">
                            <p>${productData.price} руб</p>
                        </div>
                    </div>
                    <div class="unit">
                        <button class="less">-</button>
                        <p class="unit-txt">${productData.quantity}</p>
                        <button class="more">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-card-container">
            <div class="nft">
                <div class='main'>
                    <img class='tokenImage' src="${productData.image}" alt="NFT" />
                    <h2 class="name-prod">${productData.name}</h2>
                    <div class='tokenInfo'>
                        <div class="price">
                            <p>${productData.price} руб</p>
                        </div>
                    </div>
                    <div class="unit">
                        <button class="less">-</button>
                        <p class="unit-txt">${productData.quantity}</p>
                        <button class="more">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-card-container">
            <div class="nft">
                <div class='main'>
                    <img class='tokenImage' src="${productData.image}" alt="NFT" />
                    <h2 class="name-prod">${productData.name}</h2>
                    <div class='tokenInfo'>
                        <div class="price">
                            <p>${productData.price} руб</p>
                        </div>
                    </div>
                    <div class="unit">
                        <button class="less">-</button>
                        <p class="unit-txt">${productData.quantity}</p>
                        <button class="more">+</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-card-container">
            <div class="nft">
                <div class='main'>
                    <img class='tokenImage' src="${productData.image}" alt="NFT" />
                    <h2 class="name-prod">${productData.name}</h2>
                    <div class='tokenInfo'>
                        <div class="price">
                            <p>${productData.price} руб</p>
                        </div>
                    </div>
                    <div class="unit">
                        <button class="less">-</button>
                        <p class="unit-txt">${productData.quantity}</p>
                        <button class="more">+</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>

    </div>