CSS 질문드려요

CSS 질문드려요

QA

CSS 질문드려요

본문

#container {width:100%; height:100vh; float:left; overflow:hidden; min-height:800px}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container .member {position:absolute; left:0; top:0; width:730px; height:100%}
#container .member .login {width:100%; padding:0 100px;}
#container .member ul {height:100%;}
#container .member li {float:left; line-height:60px}
#container .member li:first-child {width:20%}
#container .member li:last-child {width:70%}
#container .member li p {font-size:22px; color:#0e0e0e; font-weight:500}

 

login 클래스가 자식들의 높이에 맞게 정해져야하는데 왜 높이가 0으로 나오죠?

login에 position을 쓴것도 아닌데요... 

 

<div id="container">
    <div class="member">
        <div class="login">
            <ul>
                <li><p>아이디</p></li>
                <li><input type="text" id="wr_id" name="wr_id" class="full_ip" required placeholder="아이디를 입력해 주세요"></li>
            </ul>
        </div>

        <div class="login">
            <ul>
                <li><p>비밀번호</p></li>
                <li><input type="text" id="wr_name" name="wr_name" class="full_ip" required placeholder="비밀번호를 입력해 주세요"></li>
            </ul>
        </div>
    </div>

</div>

 

이 질문에 댓글 쓰기 :

답변 5

clear:both 를 써보세요.

 

                <li><p>아이디</p></li>
                <li><input type="text" id="wr_id" name="wr_id" class="full_ip" required placeholder="아이디를 입력해 주세요"></li>
                <div style="clear:both;"></div>

 

 

#container {width:100%; height:100vh; float:left; overflow:hidden; min-height:800px}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container .member {position:absolute; left:0; top:0; width:730px; height:100%}
#container .member .login {width:100%; padding:0 100px;}
#container .member ul {height:100%;}
#container .member ul:after {content:''; display : table; clear : both;}
#container .member li {float:left; line-height:60px}
#container .member li:first-child {width:20%}
#container .member li:last-child {width:70%}
#container .member li p {font-size:22px; color:#0e0e0e; font-weight:500}

float 속성을 해제하는 방법은 4가지가 있습니다.

1.부모요소에 overflow:hidden

2.부모요소에 가상요소 after 를 이용하여 블럭화,

3.전체요소에 전부 float 로 맞추기

4.clear:both 를 이용하여 해제하기

상황에 맞게 사용하면 되구요.

float 속성 때문에 안잡히는겁니다~

답변을 작성하시기 전에 로그인 해주세요.
전체 756
QA 내용 검색

회원로그인

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