모든 열을 동일한 높이로 설정하려면 어떻게해야합니까?

Question

나는 항상 같은 높이가되고 싶은 몇 개의 열 (div s)을 가지고 있습니다.

저는 Zurb Foundation을 사용하고 있기 때문에 레이아웃이 이와 같아서 div을 다른 사람 안에 넣을 수는 없습니다.

<div class="row equalheight"> 
    <div class="three columns"> ... </div> 
    <div class="three columns"> ... </div> 
    <div class="three columns"> ... </div> 
    <div class="three columns"> ... </div> 
</div> 

아마 CSS 쉽게 될 수 없습니다,하지만 난 모든 열을 자동적으로 같은 높이를 같게 만들 수있는 방법?

아래의 jquery, solution을 사용하여이 문제를 해결했습니다.

Answer 1

eureka! 순간을 보냈을 때 스스로 답을 찾아 냈고 커뮤니티의 이익을 위해 나눌 것이라고 생각했습니다.

요소의 children을 반복하고 가장 큰 크기를 변수에 저장 한 다음이 크기를 모든 children 요소로 설정했습니다.

이벤트를 창 load 및 resize 이벤트에 바인딩했습니다.

<script> 
function equalheight() {  
    $('.equalheight').each(function(index) { 
     var maxHeight = 0; 
     $(this).children().each(function(index) { 
      if($(this).height() > maxHeight) 
       maxHeight = $(this).height(); 
     }); 
     $(this).children().height(maxHeight); 
    });  
} 

$(window).bind("load", equalheight); 
$(window).bind("resize", equalheight); 
</script> 

완벽하게 작동합니다! 다음 웹 사이트 밖으로

Answer 2

점검 :

http://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

마크 업을 수정하지 않고,이 동일한 높이 열을 만드는 방법에 대해 갈 수있는 가장 간단한 방법은 다음과 같습니다

http://jsfiddle.net/Nu5KN/

div.equalheight { 
    display: table; 
    width: 100%; /* optional */ 
} 

div.equalheight .columns { 
    display: table-cell; 
}