Sass/CSS 그리드 및 같은 높이/너비

원하는 내용에 맞게 너비 열이있는 눈금을 정의했습니다.Sass/CSS 그리드 및 같은 높이/너비

말은, 그때 내가이 33.3 %의 약 폭의 9 열 3에 걸쳐 그래서 그리드를 사용하여 요소를 배치 할

나는 그 때 폭의 동일한 높이로 해당 요소를 기원합니다 .

이것은 항상 붙어있는 지점입니다. Compass Susy의 columns() 함수를 사용하면 높이를 33.3 %로 설정합니다. 정확히 무엇을 의미하는지는 분명하지만 원하는 것은 아닙니다.

원하는 결과를 얻으려면 어떻게해야합니까?

종류와 관련, 닐

출처

2013-02-04 rctneil

JS에 대한 필요가 없습니다. http://jsfiddle.net/opherv/hjVSM/

시도가 브라우저의 크기를 조정하고 볼 :

HTML

<div class="container"> 
<div class="item"><div class="content"></div></div> 
<div class="item"><div class="content"></div></div> 
<div class="item"><div class="content"></div></div>  
</div>

관련 CSS

.container{ 
    position: absolute; 
} 

.item{ 
    height: 0; 
    position: relative; 
    padding-bottom: 33%; 
} 

.item .content{ 
    height: 100%; 
    width: 100%; 
}

jsFiddle 예 : 그것은 간단한 HTML과 CSS 트릭으로 가능 어떻게 작동하는지.

아이디어는 요소의 패딩 하단을 사용하여 너비/높이 비율을 설정하는 것입니다.

출처

2013-02-25 11:15:06 OpherV

답장을위한 Thanks @OpherV하지만 @rctneil은 JS도 언급하지 않았습니다. (나와 같은) Sass/Susy 솔루션을 찾고 있습니다.

동적 너비가 너비와 같은 요소의 높이를 설정하는 Sass 믹스 인이 있습니까?

출처

2014-09-25 17:12:42 HomTom

Sass/CSS 그리드 및 같은 높이/너비

답변

관련 문제