Estoy revisando freecodecamp y tratando de hacer una calculadora electrónica, todavía muy temprano, solo tratando de que el tamaño y el diseño sean correctos.
Estoy usando una cuadrícula CSS para los botones, pero tengo un problema cuando intento cambiar el tamaño de los botones.
Tengo una función de javascript que crea un <button>elemento para que cada botón se muestre en la calculadora y luego lo asigna en la propiedad de área de cuadrícula css correspondiente para que coincida con la cuadrícula.
El diseño y la función funcionan perfectamente, el problema surge cuando intento cambiar el tamaño del botón "igual", ubicado en la columna 4 y las filas 4 y 5.
El botón ocupa 1 columna, pero 2 filas de la cuadrícula.
Tan pronto como cambio la heightpropiedad de los botones en css, ese botón en particular se colapsa en 1 columna y solo 1 fila.
Con suerte, eso tiene sentido, si no, aquí está el codepen: https://codepen.io/rorschach1234/pen/gxbbgg
y el 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>
el 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;
}
y el 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();
});
Agradezco cualquier ayuda, gracias!
La altura de cada fila en su teclado se define en el contenedor de la cuadrícula:
.buttons {
display: grid;
grid-template-rows: repeat(5, 1fr);
}
Entonces hay cinco filas definidas explícitamente. Todos tienen la misma altura, que es una distribución equitativa del espacio libre en el contenedor.
Pero cuando establece un elemento heighten la cuadrícula, se obtiene automáticamente align-self: start, anulando cualquier grid-areatamaño que haya definido.
De la especificación:
6.2. Tamaño del elemento de cuadrícula
Si el elemento de la cuadrícula tiene una proporción intrínseca o un tamaño intrínseco en la dimensión relevante, el elemento de la cuadrícula tiene el tamaño correspondiente
align-self: start.
Si desea que los botones tengan 25 px de alto y grid-areafuncionen, dígalo en el nivel del contenedor:
.buttons {
display: grid;
grid-template-rows: repeat(5, 25px);
}
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras