목차
- CSS 이용해, 요소 높이 균등 처리
- JS(jQuery) 이용해, 요소 높이 균등 처리
참고
- BS 3.X - 아래처럼 수동으로 CSS나 JS 이용해 따로 구현해야 함.
- BS 4.X - flex 사용해 쉽게 요소 높이 (동일하게/똑같게) 구현 가능.
CSS 이용해, 요소 높이 균등 처리
<style>
.flex-container {
display: flex;
align-items: stretch;
}
.flex-item {
flex: 1;
background:pink;
}
</style>
<div class="container">
<div class="row flex-container">
<div class="col-xs-6 flex-item">
홈짱닷컴 Homzzang.com
</div>
<div class="col-xs-6 flex-item">
홈페이지 제작관리 강의<br>
그누보드5/영카트5 강의
</div>
</div>
</div>
결과보기
JS(jQuery) 이용해, 요소 높이 균등 처리
[주의] - 로드 속도 느려질 수 있으므로, 사용 시 성능 고려 필요
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
.row>div {
float:left;
width:50%;
background:pink;
}
</style>
<div class="container">
<div class="row equal-heights">
<div class="col-xs-6">
홈짱닷컴 Homzzang.com
</div>
<div class="col-xs-6">
홈페이지 제작관리 강의<br>
그누보드5/영카트5 강의
</div>
</div>
</div>
<script>
$(document).ready(function() {
var maxHeight = 0;
$(".equal-heights div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".equal-heights div").height(maxHeight);
});
</script>
결과보기
