将长按钮垂直对齐2行

Question

我最近开始了web开发，正在制作一个基本的JS计算器。我正试图使相等和相加按钮更长，并跨越2〃；行"；垂直地我尝试使用position: absolute，但这给了我奇怪的结果，并增加了边际，但也没有给我想要的结果。

https://jsfiddle.net/41xmkpbc/

Answer 1

Eas任务，使用CSS网格进行样式设置，如下面的示例所示。我删除了行行的contaienr，因为它们不需要，并且可能会破坏CSS网格。USegird-row: span 2;具有跨越2行的元素。与计算器文本字段相同，使用grid-column: span 4;

header {
padding: 1rem;
text-align: center;
}
body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
button {
cursor: pointer;
background: lightgray;
border-radius: 5px;
font-size: 20px;
}
button:hover {
background-color: darkgray;
}
button:active{
background-color: darkgray;
transform: translateY(4px);
}
.container {
margin: auto;
border-radius: 25px;
width: 500px;
height: 500px;
overflow: auto;
padding: 3rem 2rem;
background-color: darkgrey;
}
#calculator-form {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
}
.calculator-text {
grid-column: span 4;
background-color: #8bac0f;
height: 50px;
text-align: right;
font-size: 26px;
padding-top: 1rem;
border-radius: 5px;
color: black;
}
#plus,
#equals {
grid-row: span 2;
}

<section class="container">
<form id="calculator-form">
<div class="calculator-text"> 0 </div>
<button id="clear" class="operator" value="clear">Clear</button>
<button id="division" class="operator" value="/">/</button>
<button id="multiply" class="operator" value="*"> *</button>
<button id="minus" class="operator" value="-">-</button>
<button id="seven" class="number" value="7">7</button>
<button id="eight" class="number" value="8">8</button>
<button id="nine" class="number" value="9">9</button>
<button id="plus" class="operator" value="+">+</button>
<button id="four" class="number" value="4">4</button>
<button id="five" class="number" value="5">5</button>
<button id="six" class="number" value="6">6</button>
<button id="one" class="number" value="1">1</button>
<button id="two" class="number" value="2">2</button>
<button id="three" class="number" value="3">3</button>
<button id="equals" class="operator" value="equals">=</button>

<button id="zero" class="number" value="0">0</button>
<button id="decimal" class="operator" value=".">.</button>
</form>
</section>