英文:
Prevent height of grid item from expanding all available height
问题
你的代码基本上正常工作，但有一个小问题。每当我想要切换特定球员的框时，框会扩展（正常情况下），但与我切换的框在同一行的其他球员的框也会扩展。有没有办法防止这种情况发生？
以下是你的代码中需要翻译的部分：
const arsenal = {
name: 'Arsenal',
city: 'London',
startingLineup: {
// ...其他球员数据...
}
}
let container = document.querySelector(".container")
Object.entries(arsenal.startingLineup).forEach(([key,value]) => {
let player = document.createElement("div")
// ...其他DOM元素的创建和添加...
player.addEventListener("click",() => {
player.classList.toggle("active")
})
})
let title = document.querySelector("h1")
title.innerHTML = arsenal.name
* {
margin: 0;
padding: 0
}
body {
background-color: rgb(203, 17, 17);
font-family: arial;
}
.container {
background-color: aquamarine transparent;
width: fit-content;
margin: auto;
display: grid;
grid-template-columns: auto auto auto;
}
.player {
background-color: rgb(168, 21, 21);
width: fit-content;
box-shadow: 0px 2px 3px 4px rgba(255, 255, 255, .5);
border-radius: 10px;
margin: 20px;
}
.player img {
width: 200px;
height: 200px;
padding: 5px
}
.playerData {
display: none;
max-height: 0;
}
.player.active .playerData {
background-color: rgb(118, 11, 11);
padding: 5px;
border-radius: 0px 0px 10px 10px;
max-height: 200px;
display: block;
}
h3 {
color: white
}
<h1>Hello World</h1>
<div class="container">
<!-- 这里是球员信息的HTML结构 -->
</div>
英文:
My code is generally working fine but there is one small issue. Everytime that I want to toggle a particular players' box the box expands (as it should) but then the other players' boxes that are in the same row as the box im toggling will expand too. Is there any way to prevent this from happening?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const arsenal = {
name: 'Arsenal',
city: 'London',
startingLineup: {
gk: {name:'Aaron Ramsdale', age: 24, country:'England', img:'img/ramsdale.png'},
lb: {name:'Oleksandr Zinchenko', age: 26, country:'Ukraine', img: 'img/zinchenko.jpg'},
rb: {name:'Ben White', age: 25, country:'England', img: 'img/white.png'},
lcb: {name:'Gabriel Magalhaes', age: 25, country:'Brazil',img: 'img/gabriel.png'},
rcb: {name: 'William Saliba', age: 22, country:'France', img: 'img/saliba.png'},
cdm: {name:'Thomas Partey',age: 29,country:'Ghana', img: 'img/partey.png'},
cm: {name:'Granit Xhaka',age:30,country:'Switzerland',img: 'img/xhaka face.png'},
cam: {name:'Martin Odegaard',age:23,country:'Norway',img: 'img/odegaard.png'},
lw: {name:'Gabriel Martinelli',age:21, country:'Brazil',img: 'img/martinelli.png'},
rw: {name:'Bukayo Saka',age:21,country:'England',img:'img/saka.png'},
st: {name:'Gabriel Jesus',age:26,country:'Brazil', img: 'img/jesus.png'}
}
}
let container = document.querySelector(".container")
Object.entries(arsenal.startingLineup).forEach(([key,value]) => {
let player = document.createElement("div")
let playerData = document.createElement("div")
let image = document.createElement("img")
let name = document.createElement("h3")
let age = document.createElement("h3")
let country = document.createElement("h3")
image.src = value.img
let nameNode = document.createTextNode(value.name)
let ageNode = document.createTextNode(value.age)
let countryNode = document.createTextNode(value.country)
name.appendChild(nameNode)
age.appendChild(ageNode)
country.appendChild(countryNode)
image.classList.add("image")
name.classList.add("h3")
age.classList.add("h3")
country.classList.add("h3")
playerData.append(name, age, country)
player.append(image, playerData)
playerData.classList.add("playerData")
player.classList.add("player")
container.appendChild(player)
player.addEventListener("click",() => {
player.classList.toggle("active")
})
})
let title = document.querySelector("h1")
title.innerHTML = arsenal.name
<!-- language: lang-css -->
* {
margin: 0;
padding: 0
}
body {
background-color: rgb(203, 17, 17);
font-family: arial;
}
.container {
background-color: aquamarine transparent;
width: fit-content;
margin: auto;
display: grid;
grid-template-columns: auto auto auto;
}
.player {
background-color: rgb(168, 21, 21);
width: fit-content;
box-shadow: 0px 2px 3px 4px rgba(255, 255, 255, .5);
border-radius: 10px;
margin: 20px;
}
.player img {
width: 200px;
height: 200px;
padding: 5px
}
.playerData {
display: none;
max-height: 0;
}
.player.active .playerData {
background-color: rgb(118, 11, 11);
padding: 5px;
border-radius: 0px 0px 10px 10px;
max-height: 200px;
display: block;
}
h3 {
color: white
}
<!-- language: lang-html -->
<h1>Hello World</h1>
<div class="container">
<!--<div class="player">
<img class="image" src="img/jesus.png">
<div class="playerData">
<h3 class="name">Gabriel Jesus</h3>
<h3 class="age">25</h3>
<h3 class="country">Brazil</h3>
</div>
</div>-->
</div>
<!-- end snippet -->
答案1
得分: 1
以下是您要翻译的内容：
"The point is that with grid, the child elements expand to all the available height. To prevent your cards from expanding all the height, you can wrap them in another div like this :"
"关键是，使用网格布局，子元素会扩展到所有可用的高度。为了防止您的卡片扩展到整个高度，您可以像这样将它们包装在另一个 div 中："
英文:
The point is that with grid, the child elements expand to all the available height. To prevent your cards from expanding all the height, you can wrap them in another div like this :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const arsenal = {
name: 'Arsenal',
city: 'London',
startingLineup: {
gk: {name:'Aaron Ramsdale', age: 24, country:'England', img:'img/ramsdale.png'},
lb: {name:'Oleksandr Zinchenko', age: 26, country:'Ukraine', img: 'img/zinchenko.jpg'},
rb: {name:'Ben White', age: 25, country:'England', img: 'img/white.png'},
lcb: {name:'Gabriel Magalhaes', age: 25, country:'Brazil',img: 'img/gabriel.png'},
rcb: {name: 'William Saliba', age: 22, country:'France', img: 'img/saliba.png'},
cdm: {name:'Thomas Partey',age: 29,country:'Ghana', img: 'img/partey.png'},
cm: {name:'Granit Xhaka',age:30,country:'Switzerland',img: 'img/xhaka face.png'},
cam: {name:'Martin Odegaard',age:23,country:'Norway',img: 'img/odegaard.png'},
lw: {name:'Gabriel Martinelli',age:21, country:'Brazil',img: 'img/martinelli.png'},
rw: {name:'Bukayo Saka',age:21,country:'England',img:'img/saka.png'},
st: {name:'Gabriel Jesus',age:26,country:'Brazil', img: 'img/jesus.png'}
}
}
let container = document.querySelector(".container")
Object.entries(arsenal.startingLineup).forEach(([key, value]) => {
let wrapper = document.createElement("div")
let player = document.createElement("div")
let playerData = document.createElement("div")
let image = document.createElement("img")
let name = document.createElement("h3")
let age = document.createElement("h3")
let country = document.createElement("h3")
image.src = value.img
let nameNode = document.createTextNode(value.name)
let ageNode = document.createTextNode(value.age)
let countryNode = document.createTextNode(value.country)
name.appendChild(nameNode)
age.appendChild(ageNode)
country.appendChild(countryNode)
image.classList.add("image")
name.classList.add("h3")
age.classList.add("h3")
country.classList.add("h3")
playerData.append(name, age, country)
player.append(image, playerData)
wrapper.append(player)
playerData.classList.add("playerData")
player.classList.add("player")
wrapper.classList.add("wrapper")
container.appendChild(wrapper)
player.addEventListener("click", () => {
player.classList.toggle("active")
})
})
let title = document.querySelector("h1")
title.innerHTML = arsenal.name
<!-- language: lang-css -->
* {
margin: 0;
padding: 0
}
body {
background-color: rgb(203, 17, 17);
font-family: arial;
}
.container {
background-color: aquamarine transparent;
width: fit-content;
margin: auto;
display: grid;
grid-template-columns: auto auto auto;
}
.player {
background-color: rgb(168, 21, 21);
width: fit-content;
box-shadow: 0px 2px 3px 4px rgba(255, 255, 255, .5);
border-radius: 10px;
margin: 20px;
}
.player img {
width: 200px;
height: 200px;
padding: 5px
}
.playerData {
display: none;
max-height: 0;
}
.player.active .playerData {
background-color: rgb(118, 11, 11);
padding: 5px;
border-radius: 0px 0px 10px 10px;
max-height: 200px;
display: block;
}
h3 {
color: white
}
<!-- language: lang-html -->
<h1>Hello World</h1>
<div class="container">
<!--<div class="player">
<img class="image" src="img/jesus.png">
<div class="playerData">
<h3 class="name">Gabriel Jesus</h3>
<h3 class="age">25</h3>
<h3 class="country">Brazil</h3>
</div>
</div>-->
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论