主页 / 问题 / 1372614
Accepted
shaidullin2h
Asked:2022-06-18 17:35:40 +0000 UTC2022-06-18 17:35:40 +0000 UTC

带有新换行符的产品卡的位置

  • 772

我起身解决一个问题，似乎没有那么复杂，但我找不到解决方案。

页面有产品卡片 1 行 4 张卡片，宽度为 1600px，第一张和最后一张卡片应该没有侧面缩进。尝试使用 display:flex 和 justify-content space-between。但是在添加产品卡片时（假设总共会有 6 张卡片（4-第一行，2-第二行））。因为卡片之间的空间没有对齐。

<div className="projects">
    <h1>Проекты</h1>
    <div className="projects-container">
      <div className="card"> 
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>

      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>

      <div className="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      
    </div>
    <span>Все проекты →</span>

  </div>

CSS 代码：

.projects-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-flow: wrap;
  .card {
    width: 360px;
    height: 675px;
    background-color: bisque;
    margin-top: 30px;
    p{
      color:#FFF;
      font-size: 24px;
    }
    span{
      color: rgba(255, 255, 255, 0.8);
      font-size: 18px;
    }
  }
}
javascript

3 个回答

  1. Best Answer

    例子

    .projects-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 360px);
  justify-content: space-between;
  flex-flow: wrap;
}

.projects-container .card {
  width: 360px;
  height: 675px;
  background-color: bisque;
  margin-top: 30px;
}

.projects-container .card p {
  color: #fff;
  font-size: 24px;
}

.projects-container .card span {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
}
    <div class="projects-container">
  <div class="card">
    <p>Название проекта</p>
    <span>Подробнее →</span>
  </div>
  <div class="card">
    <p>Название проекта</p>
    <span>Подробнее →</span>
  </div>
  <div class="card">
    <p>Название проекта</p>
    <span>Подробнее →</span>
  </div>
  <div class="card">
    <p>Название проекта</p>
    <span>Подробнее →</span>
  </div>

  <div class="card">
    <p>Название проекта</p>
    <span>Подробнее →</span>
  </div>

  <div class="card">
    <p>Название проекта</p>
    <span>Подробнее →</span>
  </div>

</div>

    • 2

  2. 我会这样做

    new Vue({
  el: "#app",
  data() {
    return {
      length: 3,
    }
  },
})
    .body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 2vw;
}

.item {
  border: 1px solid;
  text-align: center;
  height: 200px;
}
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<div id="app">
  <button @click="++length">
      Add
    </button>
  <button @click="--length">
      Remove
    </button>
  <div class="body">
    <div v-for="item in length" :key="item" class="item">
      {{ item }}
    </div>
  </div>
</div>

    • 2

  3. 更正了 CSS

    https://codepen.io/sochi-russia/pen/JjrVKME


    .projects-container {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-flow: wrap;}
  .card {
    width: 360px;
    height: 675px;
    background-color: bisque;
    margin-top: 30px;
    background-color:#012345;
    }
    p{
      color:#FFF;
      font-size: 24px;
    }
    span{
      color: rgba(255, 255, 255, 0.8);
      font-size: 18px;
    }
  
    <div class="projects">
    <h1>Проекты</h1>
    <div class="projects-container">
      <div class="card"> 
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div class="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div class="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      <div class="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>

      <div class="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>

      <div class="card">
        <p>Название проекта</p>
        <span>Подробнее →</span>
      </div>
      
    </div>
    <span>Все проекты →</span>

  </div>

    • 1

相关问题