Question

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

如果没有，如何解决这个问题？我正在处理具有多列的float元素，每列之间的宽度为10px。所以我需要动态宽度计算才能绕过屏幕尺寸。

Answer 1

不。如果您想在CSS中使用数学，请查看SASS或LESS。

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

Answer 2

您可以尝试calc

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

Answer 3

这听起来像你真正需要的是保证金：

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

请参阅上一篇文章：Is it possible to do mathematics inside CSS?

不可能直接来自CSS。但是可以使用例如LESS。或者你可以使用javascript来动态地进行动作。

但由于这是为了计算屏幕，所以请仔细看看什么是重复设计。已经有很多这样的框架。我不会说那里的人比其他人好。但是看看http://designpin.co/5-responsive-web-design-frameworks/

看看哪些适合您的需求。

CSS中允许数值运算吗？

4 个答案: