2014-04-15 3 views
7

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() 또는 다른 수단을 사용하는 것과 같은 기능이 있습니까?

+0

아니요, ** 버전 7까지 IE **에서 지원되는 것과 같은 기능 (AFAIK)이 없지만 더욱 강력한 기능 : JavaScript가 있습니다. –

+1

이것은 IE에서'expression()'이라고 불리 웠고 나쁜 아이디어였습니다 : http://stackoverflow.com/questions/527861/value-calculation-for-css#answer-528361 – leo

답변

10

아니요, CSS에서는 불가능합니다.

당신은 JavaScript (document.getElementById(elementOne).offsetWidth 또는 이와 비슷한 것으로, 정확히 원하는 너비에 따라)를 사용해야합니다. Calc는 수학을 수행하고 스크립트를 실행하지 않으려면 used입니다. 당신이하려고하는 것처럼 JS 문을 CSS 문에 넣을 방법이 없습니다.

JS 비트 방법에 대한 자세한 내용은 How do I retrieve an HTML element's actual width and height?

편집을 참조하십시오이 나쁜 생각을 할 이유에 대한 몇 가지 배경이 자체가 (TL Value calculation for CSS, CSS에서 구현하려면, DR은 :. 그것은 시도 된 것들 폭발)

5

사용 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> 
+0

CSS 변수는 다음과 같습니다. IE와 Edge (그리고 다른 많은 작은 브라우저들)에서는 잘 지원되지 않습니다. http://caniuse.com/#feat=css-variables – carefulnow1

+0

요즘엔 IE와 비교할만한 것이 없습니다. 그러나 가장자리에서는 잘 작동하는 것 같습니다. –

0

예. 2 COLS에 대한

당신은 당신이 얼마나 많은 열을 알고있는 경우

1), 그럼 그냥 %를 사용 (예 : 50 %)

2) : (하지 CALC와 있지만) CSS와 함께이 일을 2 개 가지 방법이 있습니다 가지고있는 열의 수를 모르는 경우 또는 사용하는 경우에 %를 사용할 수없는 경우 flexbox을 사용할 수 있습니다. 브라우저 호환성 목표에 따라 "이전"및 "새"구문을 결합하여 멋진 결과를 얻을 수 있습니다.

관련 문제