답변 4개
채택된 답변
+20 포인트
1년 전
Copy
<style>
.parent {
background-color: #eee;
height: 100px;
}
.parent::after {
display: block;
content: '';
clear: left;
}
.child {
background-color: #ccc;
float: left;
height: 100%;
}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
</div>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
그누보드초보이용자
1년 전
부모에 height: 100px;을 안주고.. 자식중에 가장 긴 것 기준으로 나머지 자식들 height도 맞춰 주고 싶은데... 그게 안되네요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
mospia
1년 전
자식중에 가장 긴거 기준을 css로는 힘들거에요 아래 스크립트적용한번해보세요
Copy
<script>
function w_resize(){
var max_h=0;
$("자식").each(function(){
$(this).css({height:"auto"});
var h = parseInt($(this).css("height"));
if(max_h<h){
max_h = h;
}
});
$("자식").each(function(){
$(this).css({height:max_h});
});
}
w_resize();
</script>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
그누보드초보이용자
1년 전
부모에 height:;을 안주고.. 자식중에 가장 긴 것 기준으로 나머지 자식들 height도 맞춰 주고 싶은데... 그게 안되네요 ㅠㅠ
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
1년 전
Copy
<style>
.parent {
overflow: auto;
}
.child {
float: left;
}
</style>
<div class="parent">
<div class="child">자식 내용</div>
<div class="child">자식 내용</div>
</div>이렇게 해보세요...
float 를 쓰면 부모가 자식의 사이즈를 무시 합니다.
overflow 를 쓰면 자식의 사이즈를 감지합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
1년 전
<style>
.parent {
overflow: auto;
height:200px;
border:1px solid #ddd;
}
.child1 {
background: #ddd;
width: 50%;
height:100%;
float: left;
}
.child2 {
background: #aaa;
width: 50%;
height:100%;
float: left;
}
</style>
<div class="parent">
<div class="child1">자식 내용1</div>
<div class="child2">자식 내용2</div>
</div>
.parent {
overflow: auto;
height:200px;
border:1px solid #ddd;
}
.child1 {
background: #ddd;
width: 50%;
height:100%;
float: left;
}
.child2 {
background: #aaa;
width: 50%;
height:100%;
float: left;
}
</style>
<div class="parent">
<div class="child1">자식 내용1</div>
<div class="child2">자식 내용2</div>
</div>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인