25个并排div：如何在LESS中用calc()实现24个等分div宽度？

你碰到的这个问题，核心是LESS对calc()的解析逻辑和原生CSS不一样——LESS会把calc()括号里的表达式当成自己的数学运算去处理，而不是原封不动交给浏览器，这就导致你的写法会被LESS错误解析，最终输出的CSS不是你想要的样子。

下面给你两种可行的解决办法：

方法一：使用LESS的转义语法（最稳妥） #

用LESS的~""转义包裹整个calc()表达式，告诉LESS编译器不要解析里面的内容，直接原样输出到最终CSS中：

.remaining-div {
  width: ~"calc((100% - 200px) / 24)";
  /* 额外补充：确保div能并排，比如设置inline-block或flex */
  display: inline-block;
  box-sizing: border-box; /* 防止padding/border占用宽度 */
}

这样编译后的CSS就是标准的width: calc((100% - 200px) / 24);，浏览器就能正确计算剩余空间的平分宽度了。

方法二：利用LESS变量（适合需要复用值的场景） #

如果200px或者24这些数值需要复用，你可以先定义变量，再用转义语法结合变量：

@fixed-width: 200px;
@div-count: 24;

.remaining-div {
  width: ~"calc((100% - @{fixed-width}) / @{div-count})";
  display: inline-block;
  box-sizing: border-box;
}

这里@{变量名}是LESS中插入变量的语法，配合转义就能让变量正确代入到calc()里。

额外提醒 #

别忘了确保父容器的布局支持div并排：

• 如果用inline-block，要注意去除元素间的空白（可以给父容器加font-size: 0，子元素再恢复字体大小）；
• 更推荐用Flex布局：给父容器设置display: flex，第一个固定宽度的div设置flex: 0 0 200px，剩余div用flex: 1也能实现平分，但既然你要求用calc()，上面的写法就完全满足需求。

内容的提问来源于stack exchange，提问作者Prabhu