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>