CSS - 使用calc（）来保持元素的宽度相同

Question

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一样宽。

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

Answer 1

不，CSS不可能。

为此，您将不得不使用JavaScript（document.getElementById(elementOne).offsetWidth或类似的，具体取决于您正在寻找的宽度）。 Calc是used来做数学，而不是执行脚本。没有办法将JS放在CSS语句中，就像你试图做的那样。

有关JS位的更多帮助，请参阅How do I retrieve an HTML element's actual width and height?

编辑：关于为什么在CSS中实现这个不好主意的一些背景，se Value calculation for CSS（TL; DR：已经尝试过了。事情爆炸了）

Answer 2

使用CSS变量：

<style>
:root { --width: 100px; } /* Set the variable --width */

table td{
  width: var(--width);    /* use it to set the width of TD elements */
  border: 1px solid;
}
</style>

<table>
  <tr>
    <td class="tab">elementOne</td>
    <td class="tab">elementtwo</td>
  </tr>
</table>

<!-- reuse the variable to set the width of the DIV element -->
<div style="width: var(--width); border: 1px solid;">Element three</div>

您还可以在calc（）函数中使用变量：

<div style="width: calc(var(--width) * 3); border: 1px solid;">Element four</div>

Answer 3

是。使用CSS有两种可能的方法（尽管不是使用calc）：

1）如果您知道有多少列，那么只需使用％（即2个列的50％）

2）如果您不知道有多少列，或者您可能无法使用％来表示您可能拥有的任何用例，那么您可以使用flexbox。根据您的浏览器兼容性目标，您可以结合使用“旧”和“新”语法来获得一些非常棒的结果。