자식이 float 일떄 부모 height로 자동으로 채우기가 가능할까요... 자작인 애들이 크기가 제각각이라서요 .. FLAX로 하면 되지만 ㅠㅠ float을 써야하는 상황이라서요..
본문
자식이 float 일떄 부모 height로 자동으로 채우기가 가능할까요...
자작인 애들이 크기가 제각각이라서요 ..
FLAX로 하면 되지만 ㅠㅠ float을 써야하는 상황이라서요..
답변 4
<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>
부모에 height: 100px;을 안주고.. 자식중에 가장 긴 것 기준으로 나머지 자식들 height도 맞춰 주고 싶은데... 그게 안되네요 ㅠㅠ
<style>
.parent {
overflow: auto;
}
.child {
float: left;
}
</style>
<div class="parent">
<div class="child">자식 내용</div>
<div class="child">자식 내용</div>
</div>
이렇게 해보세요...
float 를 쓰면 부모가 자식의 사이즈를 무시 합니다.
overflow 를 쓰면 자식의 사이즈를 감지합니다.
안되네요.. 에프터로 해서 클리어 했는데도 안된구.. 이유가 뭘까요 ㅠㅠ
<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>
위와 같이 하면 잘 됩니다.
동작 확인 하였습니다.
부모에 height:;을 안주고.. 자식중에 가장 긴 것 기준으로 나머지 자식들 height도 맞춰 주고 싶은데... 그게 안되네요 ㅠㅠ
이 부분은 자바스크립트로 해결해야 할 것입니다.
css 로는 어려울것 같습니다.
<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>