您可以使用内联样式值进行数学运算或使用 SASS 使用内联 CSS 进行数学运算吗？答案

【问题标题】：Can you do math operations with inline style values or use SASS to do math operations with inline CSS?您可以使用内联样式值进行数学运算或使用 SASS 使用内联 CSS 进行数学运算吗？
【发布时间】：2019-04-02 07:26:12
【问题描述】：

由于我的 php 代码（nette 框架）是动态的，我使用了一些内联样式。

<div id="parent" style="height:{$place->getHeight()}px; ">

这给我带来了一个问题，因为我需要子 div 重新获取此父 div 的高度并将其除以 3。

有没有办法通过内联样式来做到这一点？例如：

<div id="child" style="height:({$place->getHeight()}/3)px; ">

基本上你可以做类似style="height:(9/3)px"的事情

或者是否有一些 SASS / SCSS 替代方案来完成这个？

感谢您的时间和智慧。

【问题讨论】：

我认为应该这样做<div id="child" style="height:<?php $place->getHeight()/3; ?>px; ">
为什么不用JS？
CSS 有一个calc() 函数，看看是否可行
我没有想到使用 calc() 内联。有效。谢谢。
很高兴它有效。您能否发布您的解决方案供其他人查找？

标签： php css sass inline nette

【解决方案1】：

你应该使用calc()。

style="height: calc(<?=$place->getHeight()?>/3)px;"

【讨论】：

【解决方案2】：

<style>
div{
  width:<?=$width?>;
}
</styles>

你为什么需要它？ JS 更适合前端。您无法通过后端测量客户端宽度/高度

【讨论】：

假设 JS 未被禁用。此外，该代码中没有 JS。