我知道该主题已发布多次,但我找不到有关 calc()
函数问题的答案。
我知道 +
和 -
之间的空格问题,但这次问题与此无关。
我无法使用
连续正确显示 3 张图像
宽度:calc((100% - 20px)/3);
最后一张图片应该放在同一行,但它向下移动了。它有 margin-right: 0
所以表达式 calc((100% - 20px)/3)
应该将这三个 img
排成一行彼此相邻。
完整代码
* { margin: 0; padding: 0; background: red;}
img {
float: left;
margin-right: 20px;
width: calc((100% - 20px) / 3);
&.last { margin-right: 0; }
}
<!-- images should be displayed
- in a row
- with margin right 20px except last
------------------------------------------->
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
最佳答案
它应该是 40px
而不是 20px
。
你有 3 张图片,除了最后一张之外,每张图片都带有 margin-right: 20px
。所以它将是(3 * 20) - 20 = 40
* {
margin: 0;
padding: 0;
background: red;
}
img {
float: left;
margin-right: 20px;
width: calc((100% - 40px) / 3);
}
img.last {
margin-right: 0;
}
<!-- images should be displayed
- in a row
- with margin right 20px except last
------------------------------------------->
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
<img class="last" src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg">
关于css - calc() 不能正确处理复杂的计算,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37564829/