[ETC] JQ - <li> 높이를 LI 요소 중 최대높이에 맞추기 설정 (= 가장 긴/높은 높이에 맞추기 = 높이 정렬 = 높이 동일/통일/같게/최대/100%/나란히/꽉차게 설정)

li 요소 중 최대 높이에 높이 맞추기

 

<script src="https://code.jquery.com/jquery-latest.js"></script>

<style>

#hz li {float:left; color:white; list-style:none; width:33.33%}

#hz li.a {height:100px; background:red;}

#hz li.b {height:200px;  background:blue;}

#hz li.c {background:green;}

</style>

<ul id="hz">

 <li class="a">홈짱닷컴</li>

 <li class="b">Homzzang.com</li>

 <li class="c">홈페이지 제작관리</li>

</ul> 

<script>

$(document).ready(function(){

    var max_h=0; // 최대 높이 구하기

    $("#hz li").each(function(){

        var h = parseInt($(this).css("height"));

        if(max_h<h){ max_h = h; }

    });

    $("#hz li").each(function(){ // 최대 높이로 설정

        $(this).css({height:max_h});

    });

});

</script>

결과보기

PS1. 되도록이면 CSS로 높이 통일 권장.

PS2. 콘텐츠 불확정 경우만 jQuery 이용.

PS3. jQuery 코드 없는 경우 결과보기