CSS中允许数值运算吗？

Question

例如，width: 50% + 10px; 在CSS中合法吗？

如果不行，如何解决这个问题？我正在处理具有多列的浮动元素，每列之间的宽度为10像素。因此，我需要进行动态宽度计算以适应屏幕大小。

- OneZero

---

有 calc() 但浏览器支持不够完善。 - BoltClock

理想情况下，你应该查看 LESS 和 SASS 以实现这种 CSS 实现。 - painotpi

Answer 1

不行。如果你想在CSS中使用数学，可以考虑使用SASS或LESS。

如果你要使用LESS（或SASS），并且想要等距列，Bootstrap响应式似乎是你需要的。

- SlightlyCuban

Answer 2

您可以尝试使用"calc"技术，具体信息请参考这里。

selector{
    width: -moz-calc(50% + 10px);
    width: -webkit-calc(50% + 10px);
    width: calc(50% + 10px);
}

- Musa

Answer 3

听起来你真正需要的是边距（margin）：

如果不是这样，如何解决这个问题？我正在处理多列浮动元素，每列之间的宽度为10px。因此，我需要进行动态宽度计算以适应屏幕大小。

 .colItem { float: left; margin-right: 10px; }

在这种情况下，你的宽度实际上不应该是50％，因为两列并列会破坏布局（50％ + 50％ + 20px的外边距> 100％）。也许你不需要10px，而是1％或其他值。

更好的解决方案可能是使用box-sizing属性进行填充：

.colItem 
{ 
    float: left; 
    width: 50%; 
    box-sizing: border-box;
    -moz-box-sizing:border-box; 
    padding-right: 10px; 
}
.colItem.last 
{ 
    padding-right: 0px; 
}

- Paul Zaczkowski

---

对于使用border-box建议点个赞。但是，为了上帝的缘故，请尽快从您的帖子中删除链接，以避免愤怒的人群涌入您的帖子并将其投票成无名之辈。 - Mr Lister

Answer 4

请参考之前的帖子：CSS中是否可以进行数学计算？

CSS本身不支持直接进行数学计算。但是可以使用LESS等工具来实现，或者使用JavaScript进行动态计算。

但由于这是为了计算屏幕尺寸，因此请先了解响应式设计。已经有许多框架可供选择，我不会在这里说哪个更好...但请看一下http://designpin.co/5-responsive-web-design-frameworks/，看看哪个适合您的需求。

根据需要选择即可。

- eriksv88