Question

我正在努力完成我正在做的计算器项目。我的脚本都可以正常工作，但我无法确定如何正确安排网格。

零按钮应位于底部（按钮1和2下方），但我无法将其移动到那里。

任何人遇到同样的问题？

以下是codepen：https://codepen.io/nico3d911/pen/jZKvdE

HTML：

<div class="grid-container">
  <button class="grid-item" id="clear" onclick="clearAll()">AC</button>
  <button class="grid-item figure" id="seven" onclick="myFunction(this.id)">7</button>
  <button class="grid-item figure" id="four" onclick="myFunction(this.id)">4</button>
  <button class="grid-item figure" id="one" onclick="myFunction(this.id)">1</button>
  <button class="grid-item figure" id="zero" onclick="myFunction(this.id)">0</button>

  <button class="grid-item" id="clear-entry" onclick="clearEntry(this.id)">CE</button>
  <button class="grid-item figure" id="eight" onclick="myFunction(this.id)">8</button>
  <button class="grid-item figure" id="five" onclick="myFunction(this.id)">5</button>
  <button class="grid-item figure" id="two" onclick="myFunction(this.id)">2</button>

  <button class="grid-item" id="divide" onclick="myOperator(this.id)">/</button>
  <button class="grid-item figure" id="nine" onclick="myFunction(this.id)">9</button>
  <button class="grid-item figure" id="six" onclick="myFunction(this.id)">6</button>
  <button class="grid-item figure" id="three" onclick="myFunction(this.id)">3</button>
  <button class="grid-item" id="dot" onclick="myFunction(this.id)">.</button>

  <button class="grid-item" id="time" onclick="myOperator(this.id)">*</button>
  <button class="grid-item" id="minus" onclick="myOperator(this.id)">-</button>
  <button class="grid-item" id="plus" onclick="myOperator(this.id)">+</button>
  <button class="grid-item figure" id="equal" onclick="result()">=</button>
</div>

的CSS：

.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: 100px 100px 100px 100px 100px;
  padding: 10px;
  grid-template-columns: repeat(6, 100px);
  grid-auto-flow: column;

}
.grid-item {
  background-color: #4CAF50;
  color: white;
  border: 1px solid white;
  font-size: 30px;
  text-align: center;
}

.grid-item:active {
  background-color: #327535;

}

#zero {
  grid-column: 1 / span 2;
}
#equal {
  grid-row: 4 / span 2;
}

谢谢！

Answer 1

将grid-row: 5添加到#zero，例如

    #zero {
        grid-column: 1 / span 2;
        grid-row: 5;
    }

如何将块切换到CSS网格的底部？

1 个答案: