我想使用calc()
计算网格模板中的行数,但是试图用除法获得repeat
的计数是行不通的:
.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>
关于repeat
,calc
和除法一起工作的方式,我缺少什么吗?这是在Chrome 71.0.3578.98中。
答案 0 :(得分:6)
与calc
一起使用除法时,结果将是number
而不是integer
,因此将无法正常工作,因为repeat()
期望interger
repeat()
语法的通用形式大约为
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
ref
和
在
/
处,检查右侧是否为<number>
。如果左侧为<integer>
,请解析为<number>
。否则,请解析为左侧的类型。 ref
和
数字值用
<number>
表示,并表示实数,可能带有小数部分。 ref
即使我们俩都知道结果将是整数,浏览器仍会将其视为数字。
万一侧面有数字,您可能会遇到乘法问题
.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的行为有所不同,即使我们明确指定数字,Firefox也不会失败。在所有情况下,Fiferox都会尝试将calc()
的结果四舍五入为正整数1。
以下所有示例在Chrome上均无法运行,并且可以在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>