CSS 높이가이 경우 관련 폭

Question

에 의해 동일, 나는이 같은 CSS를 가지고 :

.w{ 
    width:80%; 
    display:block; 
} 

.d{ 
    width:14%; 
    display:inline-block 
} 

을하고 내 HTML 그래서 질문은

<div class="w"> 
    <a href="#" class="d">1</a> 
    <a href="#" class="d">2</a> 
    <a href="#" class="d">3</a> 
    <a href="#" class="d">4</a> 
    <a href="#" class="d">5</a> 
</div> 

의, .d 높이를 할 가능성이있다 그것의 너비와 같습니까? 다음과 같은 의미가 있습니다. height: 14% OF WIDTH. CSS here의 모든 단위를 읽었지만 유용 할만한 것을 찾을 수 없었습니다

Answer 1

자바 스크립트로 할 수없고 너비를 뷰포트와 관련시킬 수 있다면 너비와 높이를 설정할 수 있습니다. 뷰포트 폭 동일한 %

.w{ 
 
    width:80vw; 
 
    display:block; 
 
} 
 

 
.d{ 
 
    width:11.2vw; 
 
    display:inline-block; 
 
    border:1px solid red; 
 
    height:11.2vw; 
 
}

<div class="w"> 
 
    <a href="#" class="d">1</a> 
 
    <a href="#" class="d">2</a> 
 
    <a href="#" class="d">3</a> 
 
    <a href="#" class="d">4</a> 
 
    <a href="#" class="d">5</a> 
 
</div>