Html CSS - 使用 calc() 保持元素的宽度相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23076550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Use calc() to keep widths of elements the same
提问by Marc M.
Is something like this possible in CSS?
在 CSS 中可能有这样的事情吗？
<table>
<tr>
<td id="elementOne">elementOne</td>
<td id="elementtwo">elementtwo</td>
</tr>
</table>
<div style="width: calc(document.getElementById(elementOne).width)"></div>
So that the div is always the same width as elementOne.
这样 div 的宽度总是与elementOne.
Is there such a feature in CSS, using calc() or some other means?
CSS 中是否有这样的功能，使用 calc() 或其他方式？
采纳答案by leo
No, it's not possible with CSS.
不，CSS 是不可能的。
For that you will have to use JavaScript (document.getElementById(elementOne).offsetWidthor similar, depending on exactly what width you are looking for). Calc is usedto do math, not execute scripts. There is no way of putting JS in a CSS statement, like you are trying to do.
为此，您将不得不使用 JavaScript（document.getElementById(elementOne).offsetWidth或类似的，具体取决于您正在寻找的宽度）。Calc用于进行数学运算，而不是执行脚本。没有办法将 JS 放入 CSS 语句中，就像您尝试做的那样。
For more help on the JS bit, see How do I retrieve an HTML element's actual width and height?
有关 JS 位的更多帮助，请参阅如何检索 HTML 元素的实际宽度和高度？
Edit: 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 中实现这不是个好主意的一些背景知识，请参阅 CSS 的值计算（TL；DR：已尝试过。事情爆炸了）
回答by Simon Rigét
Use CSS variables:
使用 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>
You can also use variables in the calc() function:
您还可以在 calc() 函数中使用变量：
<div style="width: calc(var(--width) * 3); border: 1px solid;">Element four</div>
回答by Manatax
Yes. There are 2 possible ways of doing this with CSS (although not with calc):
是的。使用 CSS 有两种可能的方法（尽管使用 calc 不行）：
1) If you know how many columns you have, then just use % (i.e. 50% for 2 cols)
1）如果你知道你有多少列，那么只需使用 % （即 50% 表示 2 列）
2) If you don't know how many columns you have or you maybe can't use % for whatever use-case you might have, then you can use flexbox. Depending on your browser compatibility target, you can combine the "old" and "new" syntax to get some awesome results.
2) 如果您不知道您有多少列，或者您可能无法将 % 用于您可能拥有的任何用例，那么您可以使用flexbox。根据您的浏览器兼容性目标，您可以结合“旧”和“新”语法来获得一些很棒的结果。
