html - 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 变量：

<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 2

不，使用 CSS 是不可能的。

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

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

编辑：有关为什么在 CSS 中实现这将是一个坏主意的一些背景，请参阅 CSS 的值计算（TL；DR：它已被尝试过。事情爆炸了）

Answer 3

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

1）如果你知道你有多少列，那么只需使用 % （即 50% 用于 2 列）

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