CSS - 使用calc（）來保持元素的寬度相同

在CSS中可以這樣做嗎？CSS - 使用calc（）來保持元素的寬度相同

<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（）或其他方法的這種特性嗎？

來源

2014-04-15 Marc M.

不，不存在這樣的功能（AFAIK之類的功能在IE版本**中受到支持，直到**版本7爲止），但是您擁有更強大的功能：JavaScript。 –

這在IE中被稱爲'表達式（）'，這是一個糟糕的主意：http://stackoverflow.com/questions/527861/value-calculation-for-css#answer-528361 – leo

不，這不可能用CSS。

爲此，您將不得不使用JavaScript（document.getElementById(elementOne).offsetWidth或類似的，具體取決於您正在尋找什麼寬度）。 Calc是used做數學，不是執行腳本。沒有辦法將JS放在CSS語句中，就像你正在做的那樣。

有關JS位更多的幫助，請參閱How do I retrieve an HTML element's actual width and height?

編輯：關於爲什麼這會是一個壞主意了一些背景材料在CSS實現，本身Value calculation for CSS（TL; DR：它已經嘗試的事情爆炸）

來源

2014-04-15 07:01:00 leo

使用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>

您還可以使用變量的計算（）函數：

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

來源

2017-01-31 18:11:38

被警告，CSS變量是在IE和Edge（以及許多其他小型瀏覽器）中不太受支持; http://caniuse.com/#feat=css-variables – carefulnow1

現在沒有什麼比較IE :)它似乎與邊緣雖然工作正常。 –

是的。有與CSS這樣做（儘管不是計算）的2點可能的方式：

1）如果你知道你有多少列有，就用％（即50 2周的cols％）

2）如果您不知道有多少列，或者您可能無法使用％作爲您可能使用的任何用例，則可以使用flexbox。根據您的瀏覽器兼容性目標，您可以結合「舊」和「新」語法來獲得一些非常棒的結果。

來源

2017-06-29 23:38:09 Manatax

CSS - 使用calc（）來保持元素的寬度相同

回答

相關問題