Question

我有 6 张卡片，我从 API 中获取并使用 Javascript 动态显示数据。我试图让它们以 3 x 3 的方式并排堆叠，但我得到的是卡片堆叠在一起。

我尝试了所有我能想到的方法，但都没有找到我的错误。

这是我的 JS 代码：

list.forEach((item, i) => {
  output += `
  <div class='wrapper'>
  <div class='cards_wrap'>
    <div class='card_item'>
      <div class='card_inner'>

        <div class='card_top'>
        <a href=${list[i].url}>
          <img src=${list[i].thumbnail[0].url} alt=${list[i].name} />
          </a>
        </div>

        <div class='card_bottom'>
          <div class='card_category'>
          <a href=${list[i].url}>
            <h4>${list[i].name}</h4>
            </a>
          </div>

          <div class='card_info'>
          <a href=${list[i].url}>
            <h5>
            ${list[i].branding}
            </h5>
            </a>
          </div>

            </div>
          </div>
        </div>
      </div>         
      `;
});
document.getElementById("output").innerHTML = output;

我的 CSS

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", Times, serif;
}

body {
  color: #000;
  font-size: 14px;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.wrapper {
  background: #f1f1f1;
  width: 100%;
  margin: 20px auto;
}

.cards_wrap {
  display: flex;
  flex-wrap: wrap;
}

.cards_wrap .card_item {
  width: 25%;
  padding: 10px;
}

.cards_wrap .card_inner {
  background: #fff;
}

.cards_wrap .card_top {
  width: 100%;
  min-height: 225px;
  padding: 10px;
  padding-bottom: 0;
}

.cards_wrap .card_bottom {
  padding: 15px;
}

.cards_wrap .card_bottom .card_category {
  text-transform: uppercase;
  text-align: center;
}

.cards_wrap .card_bottom .card_info {
  padding: 15px;
  margin: 10px 0;
}

.cards_wrap .card_bottom .card_info .title {
  font-size: 18px;
  margin-bottom: 5px;
}

.cards_wrap .card_bottom .card_creator {
  text-align: center;
}

a {
  text-decoration: none;
  color: black;
}


@media (max-width: 1024px) {
  .cards_wrap .card_item {
    width: 33.3%;
  }
}

@media (max-width: 768px) {
  .cards_wrap .card_item {
    width: 50%;
  }
}

@media (max-width: 528px) {
  .cards_wrap .card_top {
    height: auto;
  }
  .cards_wrap .card_item {
    width: 100%;
  }
}

HTML

<body>

<div id='output'>
<script src="./script.js"></script>

Answer 1

看来，您正在遍历包装器。意思是，您正在复制多个包装器。您唯一要复制的是您的 card_items。我更新了您的 js 和 html，并提供了一个虚拟列表来为您的列表创建内容。你的 css 看起来不错。

const list = [{
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}, {
  name: "list name",
  url: "https://www.w3schools.com/html/pic_trulli.jpg",
  thumbnail: [{
    url: "https://www.w3schools.com/html/pic_trulli.jpg"
  }],
  branding: "list brand"

}];
let output = "";
list.forEach((item, i) => {
  output += `
    <div class='card_item'>
      <div class='card_inner'>

        <div class='card_top'>
        <a href=${list[i].url}>
          <img src=${list[i].thumbnail[0].url} alt=${list[i].name} />
          </a>
        </div>

        <div class='card_bottom'>
          <div class='card_category'>
          <a href=${list[i].url}>
            <h4>${list[i].name}</h4>
            </a>
          </div>

          <div class='card_info'>
          <a href=${list[i].url}>
            <h5>
            ${list[i].branding}
            </h5>
            </a>
          </div>

            </div>
          </div>
        </div>     
      `;
});
document.querySelector(".cards_wrap").innerHTML = output;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Georgia, "Times New Roman", Times, serif;
}

body {
  color: #000;
  font-size: 14px;
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

.wrapper {
  background: #f1f1f1;
  width: 100%;
  margin: 20px auto;
}

.cards_wrap {
  display: flex;
  flex-wrap: wrap;
}

.cards_wrap .card_item {
  width: 25%;
  padding: 10px;
}

.cards_wrap .card_inner {
  background: #fff;
}

.cards_wrap .card_top {
  width: 100%;
  min-height: 225px;
  padding: 10px;
  padding-bottom: 0;
}

.cards_wrap .card_bottom {
  padding: 15px;
}

.cards_wrap .card_bottom .card_category {
  text-transform: uppercase;
  text-align: center;
}

.cards_wrap .card_bottom .card_info {
  padding: 15px;
  margin: 10px 0;
}

.cards_wrap .card_bottom .card_info .title {
  font-size: 18px;
  margin-bottom: 5px;
}

.cards_wrap .card_bottom .card_creator {
  text-align: center;
}

a {
  text-decoration: none;
  color: black;
}

@media (max-width: 1024px) {
  .cards_wrap .card_item {
    width: 33.3%;
  }
}

@media (max-width: 768px) {
  .cards_wrap .card_item {
    width: 50%;
  }
}

@media (max-width: 528px) {
  .cards_wrap .card_top {
    height: auto;
  }
  .cards_wrap .card_item {
    width: 100%;
  }
}

<div id='output'>
  <div class="wrapper">
    <div class="cards_wrap">

    </div>
  </div>
</div>

卡片没有正确堆叠在一起 3x3

1 个答案: