2013-04-22 2 views
0

http://www.indigoeastend.com/live-entertainment.html는 jQuery를 - 열 때 레이아웃을 깰 수 아코디언 상자가 위에 나열된 동일한 열 스크립트 내가 페이지를

, 재 계산 높이입니다. 특히 마지막 하나.

$(window).load(function() { 
    $(".equal_heights").equalHeights(); 
}); 

(function($) { 
    $.fn.equalHeights = function(minHeight, maxHeight) { 
     tallest = (minHeight) ? minHeight : 0; 
     this.each(function() { 
      if($(this).height() > tallest) { 
       tallest = $(this).height(); 
      } 
     }); 
     if((maxHeight) && tallest > maxHeight) tallest = maxHeight; 
     return this.each(function() { 
      $(this).height(tallest).css("overflow","visible"); 
     }); 
    } 
})(jQuery); 

가 어떻게 상자가 깨진 경우 모두 열 크기를 조정할 수 있습니다 : 나는 열이 동일 얻기 위해 다음 스크립트를 사용합니다. 나는 내적으로 실험하고 있었지만 작동하지 않았다. 누구든지 어떤 생각을 가지고 있습니까?

+1

사용할 수있는 순수 CSS 옵션이있을 때 동등한 높이의 열을 만들기 위해 JavaScript로 이동 한 특별한 이유가 있습니까? – cimmanon

+0

내가 아는 한 실제로 사용할 수있는 좋은/진정한 동등한 높이의 CSS 옵션이 없다는 것을 알고 있습니다. – Breezer

+0

@cimmanon : 순수한 CSS에서는 * 고통 스럽기 때문에 아마. –

답변

0

CSS를 사용하여 동일한 높이의 열을 얻을 수 있으므로 많은 문제를 해결할 수 있습니다. 가장 간단한 방법은 테이블 셀에 요소의 표시 속성을 변경하는 것입니다

http://tinker.io/ae84b

.main { 
    display: table; /* optional */ 
} 

.main article, .main aside { 
    display: table-cell; 
} 

<div class="main"> 
    <article> 
     Lorem ipsum dolor sit amet... 
    </article> 

    <aside> 
     I'm the aside! 
    </aside> 
</div> 

이 아니라 그들이 인접 테이블 -있는 한 "열", 무제한와 함께 작동 세포. 부유물은 사용되지 않으므로 부유물을 제거 할 필요가 없습니다. 다른 장점은 순수한 CSS이기 때문에 미디어 쿼리를 통해 좁은 장치에서 2 열 레이아웃을 숨길 수 있다는 것입니다.