답변 4개
채택된 답변
+20 포인트
1년 전
</p>
<p><style>
.parent {
background-color: #eee;
height: 100px;
}
.parent::after {
display: block;
content: '';
clear: left;
}
.child {
background-color: #ccc;
float: left;
height: 100%;
}
</style></p>
<p><div class="parent">
<div class="child">child</div>
<div class="child">child</div>
</div></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
그누보드초보이용자
1년 전
부모에 height: 100px;을 안주고.. 자식중에 가장 긴 것 기준으로 나머지 자식들 height도 맞춰 주고 싶은데... 그게 안되네요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
1년 전
자식중에 가장 긴거 기준을 css로는 힘들거에요 아래 스크립트적용한번해보세요
</p>
<p><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();</p>
<p></script>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
1년 전
부모에 height:;을 안주고.. 자식중에 가장 긴 것 기준으로 나머지 자식들 height도 맞춰 주고 싶은데... 그게 안되네요 ㅠㅠ
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
설국열차
1년 전
이 부분은 자바스크립트로 해결해야 할 것입니다.
css 로는 어려울것 같습니다.
css 로는 어려울것 같습니다.
댓글을 작성하려면 로그인이 필요합니다.
1년 전
</p>
<p><style>
.parent {
overflow: auto;
}
.child {
float: left;
}
</style></p>
<p><div class="parent">
<div class="child">자식 내용</div>
<div class="child">자식 내용</div>
</div></p>
<p>이렇게 해보세요...
float 를 쓰면 부모가 자식의 사이즈를 무시 합니다.
overflow 를 쓰면 자식의 사이즈를 감지합니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
�
그누보드초보이용자
1년 전
안되네요.. 에프터로 해서 클리어 했는데도 안된구.. 이유가 뭘까요 ㅠㅠ
�
설국열차
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>
�
설국열차
1년 전
위와 같이 하면 잘 됩니다.
동작 확인 하였습니다.
동작 확인 하였습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인