KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

CSS 질문드려요

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
신용카드 2.9%
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}
주소복사
답변의 댓글

DSLOVE님의 답변

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

1.부모요소에 overflow:hidden

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

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

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

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

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

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 91,708 | RSS
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색

회원로그인

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

© SIRSOFT