Vue的div顯示網格去除行與行之間的額外空間

我是Vue的新手，在這個專案中，我試圖在每一行中為一個div顯示2個球員。我使用display: grid; CSS作為playerDiv的id來解決這個問題。我現在遇到的問題是，它在第一、第二和第三行之間產生了一個巨大的差距。有什么方法可以消除每行之間的差距嗎？

我為playerDiv使用了440px的高度，為eachPlayerDiv使用了30px。我不能改變這一點，因為有時todos上的資料庫值可能只有2名球員或12名球員。是否有辦法在不改變我定義的高度的情況下解決這個差距問題？

目前它顯示為

Player 1 Player 2




球員 3 球員 4




玩家 5 玩家 6

是否有辦法將球員顯示為

Player  1 Player  2
球員 3 球員 4
玩家 5 玩家 6

JsFiddle 鏈接 = https://jsfiddle.net/ujjumaki/f0js3pLa/25/

查看

<div id="app"/span>>

  <div id="playerDiv"> 
    < div v-for="todos "中的元素 class="eachPlayerDiv"> 
      {{element.text}}
    </div>{element.text}}
  </div>>
</div>
<style>。
#playerDiv{
  height:440px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color:紅色。
}

.eachPlayerDiv{
  border-style:solid;
  background-color:黃色。
  height: 30px;
}
</style> 

方法

new Vue（{
  el: "#app"/span>,
  data: {
    todos: [
      { text: "David"/span>, id: 1 },
      { text: "John"/span>, id: 2 },
      { text: "Alek"/span>, id: 3 },
      { text: "Joshua"/span>, id: 4}。
      { text: "Jonny"/span>, id: 5}。
      { text :"Sam", id：6}.
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !"todo.done"。
    }
  }
})

uj5u.com熱心網友回復：

將網格包裹在一個定義為flexbox的容器內。從grid-container中移除440px的高度，并將其應用到flexbox容器中。這樣你就可以使用垂直對齊（align-item）來使網格居中，行與行之間沒有間隙。

//for demonstration purpose only。

document.querySelector('#playerDiv'/span>)。 innerHTML = '<div class="eachPlayerDiv">Box 1</div><div class="eachPlayerDiv">Box 2</div> <div class="eachPlayerDiv"> Box 3</div><div class="eachPlayerDiv">Box 4</div><div class="eachPlayerDiv">Box 5</div><div class="eachPlayerDiv">Box 6</div> ' ;

span class="hljs-selector-class">.wrapper {
  height: 440px;
  display: flex;
  align-items: center; /* vertical center */
  border: 1px solid red; /* for demo purpose only */
}
  


#playerDiv {
  flex-grow: 1; /* 讓網格消耗整個寬度 */
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: 紅色。
}

.eachPlayerDiv {
  border-style: solid;
  background-color: 黃色。
  height: 30px;
}

<div id="app"> /span>
  <div class="wrapper"> 
    <div id="playerDiv"/span>>
      < div v-for="todos "中的元素 class="eachPlayerDiv"> 
        {{element.text}}
      </div>{element.text}}
    </div>/span>
  </div>/span>
</div>/span>

uj5u.com熱心網友回復：

嘗試添加align-content: start;或center或end，取決于你想把playerDiv的位置

new Vue（{
  el: "#app"/span>,
  data: {
    todos: [
      { text: "David"/span>, id: 1 },
      { text: "John"/span>, id: 2 },
      { text: "Alek"/span>, id: 3 },
      { text: "Joshua"/span>, id: 4}。
      { text: "Jonny"/span>, id: 5}。
      { text :"Sam", id：6}.
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !"todo.done"。
    }
  
})

<script src="https://cdnjs. cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>/span>
<div id="app">/span>

  <div id="playerDiv"/span>>
    < div v-for="todos "中的元素 class="eachPlayerDiv"> 
      {{element.text}}
    </div>{element.text}}
  </div>/span>
</div>/span>
<style>
#playerDiv{
  height:440px;
  background-color: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color:紅色。
  align-content: start;
}

.eachPlayerDiv{
  border-style:solid;
  background-color:黃色。
  height: 30px;
}
</style>/span>

標籤：

上一篇：Bootstrap布局不能正確分割卡片

下一篇：關于底部溢位資訊的解釋