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 코드 없는 경우 결과보기