자식이 float 일떄 부모 height로 자동으로 채우기가 가능할까요... 자작인 애들이 크기가 제각각이라서요 .. FLAX로 하면 되지만 ㅠㅠ float을 써야하는 상황이라서요..

자식이 float 일떄 부모 height로 자동으로 채우기가 가능할까요... 자작인 애들이 크기가 제각각이라서요 .. FLAX로 하면 되지만 ㅠㅠ float을 써야하는 상황이라서요..

QA

자식이 float 일떄 부모 height로 자동으로 채우기가 가능할까요... 자작인 애들이 크기가 제각각이라서요 .. FLAX로 하면 되지만 ㅠㅠ float을 써야하는 상황이라서요..

답변 4

본문



자식이 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>

<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>
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 38
© SIRSOFT
현재 페이지 제일 처음으로