CSS-使用calc（）保持元素的宽度相同 [英] CSS - Use calc() to keep widths of elements the same

问题描述

在CSS中是否可能出现这种情况？

Is something like this possible in CSS?

<table>
  <tr>
    <td id="elementOne">elementOne</td>
    <td id="elementtwo">elementtwo</td>
  </tr>
</table>

<div style="width: calc(document.getElementById(elementOne).width)"></div>

因此div的宽度始终与 elementOne 。

So that the div is always the same width as elementOne.

CSS中是否有这样的功能，使用calc（）或其他方式？

Is there such a feature in CSS, using calc() or some other means?

推荐答案

否，CSS无法实现。

为此，您将必须使用JavaScript（ document.getElementById（elementOne ）.offsetWidth 或类似的值，具体取决于您要查找的宽度）。 Calc 用于用于做数学运算，而不是执行脚本。像您要尝试的那样，无法将JS放入CSS语句中。

For that you will have to use JavaScript (document.getElementById(elementOne).offsetWidth or similar, depending on exactly what width you are looking for). Calc is used to do math, not execute scripts. There is no way of putting JS in a CSS statement, like you are trying to do.

有关JS位的更多帮助，请参见如何检索HTML元素的实际宽度和高度？

For more help on the JS bit, see How do I retrieve an HTML element's actual width and height?

编辑：要了解为什么在CSS中实现该想法不好，请参见 CSS的价值计算（TL； DR：已经尝试过。事情爆炸了）

For some background on why this would be a bad idea to implement in CSS, se Value calculation for CSS (TL;DR: It has been tried. Things exploded)

这篇关于CSS-使用calc（）保持元素的宽度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！