我正在使用 freecodecamp 并尝试制作一个电子计算器，但还处于早期阶段，只是想确保尺寸和布局正确。
我对按钮使用 CSS 网格，但在尝试调整按钮大小时遇到问题。
我有一个 javascript 函数，可以创建 <button>要在计算器上显示的每个按钮的元素，然后在相应的 css grid-area 属性中进行分配以匹配网格。
布局和功能工作完美，当我尝试调整位于第 4 列、第 4 行和第 5 行的“等于”按钮的大小时，问题就出现了。
该按钮占用网格的 1 列、2 行。
一旦我更改 height css 中按钮的属性，该特定按钮会折叠成 1 列和 1 行。
希望这是有道理的，如果没有，这里是代码笔:https://codepen.io/rorschach1234/pen/gxbbgg
和 html:
<head>
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="top">Electronic Calculator</h2>
<div class="display">
<h2>display</h2>
</div>
<div class="buttons">
</div>
</div>
</body>
CSS:
$calc-font: 'Orbitron';
.container {
margin: 5% 33%;
background: grey;
}
.top {
font-family: $calc-font;
text-align: center;
padding-top: 5px;
}
.display {
margin: 3% 5%;
padding-bottom: 3%;
background: white;
text-align: right;
font-family: $calc-font;
}
.buttons {
margin: 0 5%;
padding-bottom: 3%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-template-areas:
"clearall clearD divide multiply"
"seven eight nine minus"
"four five six add"
"one two three equals"
"zero zero period equals";
}
button {
height: 25px;
}
和 JavaScript:
var btnClasses = ["clearall", "clearD", "divide", "multiply", "seven", "eight", "nine", "minus", "four", "five", "six", "add", "one", "two", "three", "equals", "zero", "period"];
var buttons = ["AC", "CE", "÷", "×", 7, 8, 9, "−", 4, 5, 6, "+", 1, 2, 3, "=", 0, "."];
/*function creates a button and then adds the corresponding grid-area to match the grid-template-areas layout in CSS*/
function createButtons() {
for (var i = 0; i<btnClasses.length; i++) {
$(".buttons").append("<button class=\"" + btnClasses[i] + "\">" + buttons[i] + "</button>");
$("." + btnClasses[i]).css("grid-area", btnClasses[i]);
$("." + btnClasses[i]).css("font-family", "Orbiton");
};
};
$(document).ready(function() {
createButtons();
});
感谢任何帮助，谢谢!
最佳答案
键盘中每行的高度在网格容器中定义:
.buttons {
display: grid;
grid-template-rows: repeat(5, 1fr);
}
因此有五个显式定义的行。它们都具有相同的高度，即容器中自由空间的均匀分布。
但是，当您在网格项上设置高度时，它会自动获取align-self:start，覆盖您调整大小的任何grid-area已定义。
来自规范:
If the grid item has an intrinsic ratio or an intrinsic size in the relevant dimension, the grid item is sized as for
align-self: start.
如果您希望按钮高度为 25px，并且 grid-area 正常工作，只需在容器级别说:
.buttons {
display: grid;
grid-template-rows: repeat(5, 25px);
}
关于javascript - CSS 网格调整网格内按钮的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45315374/