Me gustaría calcular el número de filas en una plantilla de cuadrícula usando calc(), pero intentar obtener el repeatrecuento con la división no funciona:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.2);
}
.grid>div {
background: tomato;
width: 20px;
text-align: center;
margin: auto;
}
.grid.no-calc {
grid-template-rows: repeat(3, 30px);
}
.grid.addition {
grid-template-rows: repeat(calc(1 + 2), 30px);
}
.grid.subtraction {
grid-template-rows: repeat(calc(4 - 1), 30px);
}
.grid.multiplication {
grid-template-rows: repeat(calc(3 * 1), 30px);
}
.grid.division {
grid-template-rows: repeat(calc(6 / 2), 30px);
}<p>Top 4 have their row heights set correctly</p>
<div class="grid no-calc">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid addition">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid subtraction">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid multiplication">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>Division doesn't work in setting row height</p>
<div class="grid division">
<div>1</div>
<div>2</div>
<div>3</div>
</div>¿Hay algo que me falta por la forma repeat, calcy el trabajo de división juntos? Esto está en Chrome 71.0.3578.98.
Cuando se usa la división con calcel resultado será un numbery no un, integerpor lo tanto, no funcionará porque se repeat()espera uninterger
La forma genérica de la
repeat()sintaxis es, aproximadamente,
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )árbitro
Y
En
/, compruebe que el lado derecho esté<number>. Si el lado izquierdo es<integer>, resuelva<number>. De lo contrario, resuelva al tipo del lado izquierdo. árbitro
Y
Los valores numéricos se indican
<number>y representan números reales , posiblemente con un componente fraccionario. árbitro
Incluso si ambos sabemos que el resultado será un número entero, el navegador lo considerará como un número.
Puede tener el mismo problema con la multiplicación en caso de que tenga un número en uno de los lados
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.2);
}
.grid>div {
background: tomato;
width: 20px;
text-align: center;
margin: auto;
}
.grid.no-calc {
grid-template-columns: repeat(3, 30px);
border-bottom:3px solid red;
}
.grid.multiplication {
grid-template-columns: repeat(calc(3 * 1.0), 30px); /*will fail*/
border-bottom:calc(3px * 1.0) solid red;
}
.grid.division {
grid-template-columns: repeat(calc(6 / 2), 30px);
border-bottom:calc(6px / 2) solid red; /*this will work because border accept numbers*/
}<div class="grid no-calc">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid multiplication">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid division">
<div>1</div>
<div>2</div>
<div>3</div>
</div>Firefox se comporta de manera diferente y nunca falla, incluso si especificamos números explícitamente. En todos los casos, Fiferox intentará redondear el resultado de calc()a uno entero positivo.
Todos los ejemplos siguientes fallarán en Chrome y funcionarán en Firefox:
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.2);
}
.grid>div {
background: tomato;
width: 20px;
text-align: center;
margin: auto;
}
.grid.no-calc {
grid-template-columns: repeat(calc(2.8), 30px); /*will be converted to 3*/
border-bottom:calc(calc(2.8) * 1px) solid red;
}
.grid.multiplication {
grid-template-columns: repeat(calc(3 * 1.55), 30px); /*will be converted to 4*/
border-bottom:calc(calc(3 * 1.55) * 1px) solid red;
}
.grid.division {
grid-template-columns: repeat(calc(6 / 2.8), 30px); /*will be converted to 2*/
border-bottom:calc(calc(6 / 2.8) * 1px) solid red;
}<div class="grid no-calc">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="grid multiplication">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="grid division">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>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