如何让JS计算器的等号与加号按钮垂直跨两行对齐？

嘿，我看你在做基础JS计算器，想让等号和加号按钮垂直跨两行显示对吧？之前用position: absolute和调整margin没达到预期，其实用CSS Grid来做这个布局是最省心的，完全不用那些容易破坏布局的hack方法～

为什么之前的方法不好用？ #

• position: absolute会让按钮脱离正常文档流，不仅容易和其他按钮重叠，还会导致容器无法正确计算高度，布局很容易乱。
• 调整margin只是改变按钮的外边距，没法让按钮真正占据两行的空间，视觉上的“拉长”其实是假的，本质还是单行高度。

用CSS Grid实现的具体方案 #

首先给你的按钮容器设置Grid布局，定义好列数，然后给需要跨两行的按钮设置grid-row: span 2就行，步骤如下：

1. 设置容器的Grid布局
   假设你的按钮容器类是calculator-buttons，添加以下CSS：

   .calculator-buttons {
     display: grid;
     /* 分成4列，每列宽度均等 */
     grid-template-columns: repeat(4, 1fr);
     /* 可选：给按钮之间加一点间距 */
     gap: 8px;
     /* 可选：设置按钮行的最小高度 */
     grid-auto-rows: 60px;
   }
   

2. 让加号和等号按钮跨两行
   给这两个按钮分别加类（比如plus-btn和equal-btn），然后添加CSS：

   .plus-btn, .equal-btn {
     /* 让按钮垂直跨越2行 */
     grid-row: span 2;
     /* 可选：调整按钮内文字的对齐方式 */
     display: flex;
     align-items: center;
     justify-content: center;
   }
   

3. 调整HTML结构（关键）
   要注意按钮的顺序，确保跨两行的按钮放在正确的位置，避免和其他按钮的布局冲突。比如参考这个结构：

   <div class="calculator-buttons">
     <button>7</button>
     <button>8</button>
     <button>9</button>
     <button class="plus-btn">+</button>
     <button>4</button>
     <button>5</button>
     <button>6</button>
     <button class="equal-btn">=</button>
     <button>1</button>
     <button>2</button>
     <button>3</button>
     <button>-</button>
     <button>0</button>
     <button>.</button>
     <button>C</button>
     <button>/</button>
   </div>
   

这样设置后，加号和等号按钮就会自动垂直占据两行的空间，布局既整齐又稳定，完全不用操心之前的定位问题～

内容的提问来源于stack exchange，提问作者Tavian T