- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想使用 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 中。
最佳答案
将除法与 calc
结合使用时结果将是 number
而不是 integer
因此它不会工作,因为 repeat()
期待 interger
The generic form of the
repeat()
syntax is, approximately,
repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )
ref
和
At
/
, check that the right side is<number>
. If the left side is<integer>
, resolve to<number>
. Otherwise, resolve to the type of the left side.ref
和
Number values are denoted by
<number>
, and represent real numbers, possibly with a fractional component.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 的行为不同,即使我们明确指定数字也永远不会失败。在所有情况下,Fiferox 将尝试对 calc()
的结果进行舍入为正整数。
以下所有示例在 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>
关于html - 如何计算()网格模板中的行数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62965233/
我有一个包含未定义条目数的数据文件,如下所示: A B C D E.. 1 0 2 5 4 7 4 3 4 1 8 7 4 0 7 1 1 第一行代表工作时间,而不是暂停等交替方式。为了可
我需要有关小型 SQL 查询的帮助。考虑下表: TicketNo | Rules | Audit Result --------------------------------- P
我有一个非常大的表(~1 000 000 行)和带有联合、连接和 where 语句的复杂查询(用户可以选择不同的 ORDER BY 列和方向)。我需要获取分页的行数。如果我运行查询而不计算行数,它会很
我想获取数据帧的行数。 我可以通过 size(myDataFrame)[1] 实现这一点. 有更干净的方法吗? 最佳答案 如果您正在使用 DataFrames具体来说,那么你可以使用 nrow() :
是否可以在带有千位分隔符的 VIM 状态栏中显示行数,最好是自定义千位分隔符? 例子: set statusline=%L 应该导致“1,234,567”而不是“1234567”。 最佳答案 我找到了
我有一个非常基本的问题,但不知道该怎么做。如果 mysql 表中的行数增加,我想刷新页面。我已经尝试了一些不同的事情,比如在表中添加一个单独的列,如果行数和这个值相等,则值为 (id + 1),然后进
我的 mysql TB 中的行数(如 TB 信息中所示)是 11093,而自动递增 ID(从 1 开始)是 11361。为什么会这样? 最佳答案 删除的行不会重置 AI 索引。行数是当前表中的条目数,
我有一个 MySQL 表如下。 emp_no emp_name dob gender 1 A 1978-10-10 Male 2 B
ifstream inFile; inFile.open(filename); //open the input file stringstream strStream; strStream << i
SELECT * FROM table1 WHERE EXISTS (SELECT * FROM table2 WHERE *condition*) 例如,我可以检查是否有 3 行符合 table2
我正在尝试提取 SQL 表中的总行数。 我正在使用以下代码: $rowNum = mysql_query("SELECT COUNT(*) FROM Logs"); $count = mysql_fe
我想知道表格 View 的行宽是多少,UITableViewCell 文本标签的字体是什么,有人可以帮我吗? 最佳答案 NSLog(@"width: %f", cell.frame.size.widt
对于以下内容: def linecount(filename): count = 0 for x in open(filename): count += 1 r
感谢关注。 我用C语言写了一段代码来统计字数、行数和字符数。 while((c = fgetc(fp)) != EOF) { if((char)(c) == ' ' || (char)(c)
我是 matlab 的新手,只需要更改代码中的一个非常小的东西。我有以下矩阵: ans = 1 1 1 1 2 1 2 1
我只是想弄清楚如何确定行数,然后使该数字显示在 HTML 中。 我准备好的声明如下所示: if($stmt = $mysqli -> prepare("SELECT field1, field2, f
PDO 显然无法计算从选择查询返回的行数(mysqli 有 num_rows 变量)。 除了使用 count($results->fetchAll()) 之外,有没有办法做到这一点? 最佳答案 根据手
SELECT count(*) FROM Stack WHERE Id = 33478 GROUP BY SID Output: (No column name) 1 4 对于结果;有两排。怎么退货
IE。如果我们有一个包含400万行的表。 其中具有一个STATUS字段,该字段可以采用以下值:TO_WORK,BLOCKED或WORKED_CORRECTLY。 您是否会在一个仅会更改一次的字段上进行
所以在JTextArea中有一个getLineCount()是否有与JTextPane类似的东西,因为我可以找到任何东西。也许有不同的方法来获得它?我想获取当前存在的行数。 最佳答案 (正如您所指出的
我是一名优秀的程序员,十分优秀!