html - CSS中是否允许数值运算？

Question

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

如果没有，如何解决这个问题？我正在处理具有多列的浮动元素，每列之间的宽度为 10px。所以我需要一个动态宽度计算来解决屏幕大小。

Answer 1

没有。如果您想要 CSS 中的数学，请查看SASS或LESS。

如果你打算使用 LESS（或 SASS），并且你想要均匀间隔的列，那么Bootstrap 响应式听起来就像您需要的那样。

Answer 2

你可以试试计算

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

Answer 3

听起来您真正需要的是保证金：

如果没有，如何解决这个问题？我正在处理具有多列的浮动元素，每列之间的宽度为 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; 
}

Answer 4

请参阅上一篇文章：是否可以在 CSS 中进行数学运算？

不可能直接来自 CSS。但是可以使用，例如，LESS。或者你可以使用 javascript 来做动态。

不过既然是计算屏幕，那么请大家看看什么是响应式设计。已经有很多框架可以做到这一点。我不会说这里的一个比其他的更好.. 但是看看http://designpin.co/5-responsive-web-design-frameworks/

看看什么适合您的需求。