채택완료
자식이 float 일떄 부모 height로 자동으로 채우기가 가능할까요... 자작인 애들이 크기가 제각각이라서요 .. FLAX로 하면 되지만 ㅠㅠ float을 써야하는 상황이라서요..
자식이 float 일떄 부모 height로 자동으로 채우기가 가능할까요...
자작인 애들이 크기가 제각각이라서요 ..
FLAX로 하면 되지만 ㅠㅠ float을 써야하는 상황이라서요..
|
답변 4개 / 댓글 5개
채택된 답변
+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>
답변을 작성하려면 로그인이 필요합니다.