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

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
자식이 float 일떄 부모 height로 자동으로 채우기가 가능할까요... 자작인 애들이 크기가 제각각이라서요 .. FLAX로 하면 되지만 ㅠㅠ float을 써야하는 상황이라서요..

QA

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

<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>
답변을 작성하시기 전에 로그인 해주세요.
전체 1
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT