主页 / 问题 / 1237027
Accepted
Мне без сахара
Asked:2022-01-28 19:37:33 +0800 CST2022-01-28 19:37:33 +0800 CST

显示网格模板行不起作用

  • 772

在第三个元素之后添加一个元素时，元素应该出现在侧面而不是下面，正如它所写的那样，grid-template-rows: 1fr 1fr 1fr;但这不会发生，为什么？

document.querySelector(".btn").onclick = ()=>{
    let x = document.createElement("div")
    x.classList.add("item")
    document.querySelector(".content").appendChild(x)
    let y = document.querySelectorAll(".item")
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
.container{
    width: 600px;
    height: 400px;
    background-color: blanchedalmond;
}
.content{
    border:1px solid black;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}
.item{
    width:300px;
    height:50px;
    background-color: cornflowerblue;
    border:1px solid black;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel = "stylesheet" href = "style.css">
</head>
<body>      
            <div class="container">
                <div class="content">
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                </div>

            <button class = "btn">+</button>    
            </div>
            <script src="script.js"></script>
</body>
</html>

javascript

1 个回答

  1. Best Answer

    const btn = document.querySelector(".btn");
const content = document.querySelector(".content");

btn.addEventListener('click', () => {
  const div = document.createElement("div");
  div.classList.add("item");
  content.append(div);
  const items = content.querySelectorAll(".item");
});
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  max-width: 600px;
}

.content {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-template-rows: 50px 50px 50px;

  border: 1px solid black;
  background-color: blanchedalmond;
}

.item {
  background-color: cornflowerblue;
  border: 1px solid black;
}
    <div class="container">
  <div class="content">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <button class="btn">+</button>
</div>

    • 1

相关问题