CSS UL의 높이 차이

Question

는 나는 내 문제의 jsfiddle을 준비했습니다 :

가 어떻게이 ul 열 같은 높이와 그 내부에 포함되어있는 데이터의 양에 의존하지를 만들 수 있습니다.

CSS :

#priceTable{ 
    width:780px; 
    margin:0 auto; 
    background:gray; 
} 
#priceTable ul{ 
    display:inline-block; 
    margin:0 40px 0 0; 
    height:100%; 
    min-height:100%; 
    width:195px; 
    background:orange; 
} 
#priceTable li{ 
    text-align:center; 
    font-weight:bold; 
    color:#000; 
} 

HTML :

     <div id="priceTable"> 
          <ul class="rowOne"> 
           <li class="rowName">Package</li> 
           <li>1</li> 
           <li>2</li> 
           <li>3</li> 
           <li>4</li> 
           <li>5</li> 
           <li class="button"><a href="#">Buy Now</a></li> 
           </ul> 
           <ul class="rowTwo"> 
            <li class="rowName">Package</li> 
            <li>1</li> 
            <li>2</li> 
            <li>3</li> 
            <li>4</li> 
            <li>5</li> 
            <li>6</li> 
            <li class="button"><a href="#">Buy Now</a></li> 
            </ul> 
            <ul class="rowThree"> 
             <li class="rowName">Package</li> 
             <li>1</li> 
             <li>2</li> 
             <li>3</li> 
             <li>4 </li> 
             <li class="button"><a href="#">Buy Now</a></li> 
             </ul>  
          </div><!-- end #priceTable -->​ 

Answer 1

이렇게하려면 자바 스크립트가 필요하지 않습니다. 이 문제를 처리 할 수있는 많은 HTML/CSS 기술이 있습니다. 간단한 Google 검색이 articleslikethese으로 나타났습니다.

예, 이것들은 <ul> 대신에 <div> s를 기술하지만 기술은 여전히 ​​적용 가능합니다.

Answer 2

CSS와 함께이 작업을 수행하는 onlu 방법은 그들에게 모든 고정 된 높이를 설정하는 것입니다. min-height : 100% 대신 min-height: 300px과 같은 것을 사용하십시오. 그러나 uls의 각 데이터가 얼마나 많은지 알지 못하기 때문에 이는 매우 융통성없는 해결책입니다.

이제 모든 열의 높이가 같아지기를 바란다면 모든 열의 높이를 높이기를 원할 것입니다.

이 jQuery 코드는 트릭을 수행해야합니다

var equalHeight = function (group) { 
    var tallest = 0; 

    group.each(function() { 
     var thisHeight = $(this).height(); 
     if(thisHeight > tallest) { 
      tallest = thisHeight; 
     } 
    }); 

    group.height(tallest); 
} 

그리고

여기 => http://jsfiddle.net/y2eHg/

Answer 3

하드를 예를 들어 작업 요소

$(function() { 
    equalHeight($('.rows')); 
}); 

의 그룹으로 준비 문서에 전화를보다 해결 방법은 고정 된 높이를 픽셀로 설정하는 것입니다. overflow: hidden