테스트 사이트 - 개발 중인 베타 버전입니다

CSS 질문드려요 채택완료

morrie 5년 전 조회 2,230
#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을 쓴것도 아닌데요... 

 

 

댓글을 작성하려면 로그인이 필요합니다.

답변 5개

채택된 답변
+20 포인트
샤브스타

clear:both 를 써보세요.

 

               

  • 아이디

  •                
  •                 

     

     

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 2개

    m
    morrie
    5년 전
    login 클래스에 clear:both 를 써봐도 똑같아요... 높이가 0으로 나오네요
    m
    morrie
    5년 전
    답변감사합니다~

    댓글을 작성하려면 로그인이 필요합니다.

    D
    5년 전

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

    1.부모요소에 overflow:hidden

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

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

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

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

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

    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 1개

    m
    morrie
    5년 전
    답변감사합니다~

    댓글을 작성하려면 로그인이 필요합니다.

    #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}
    로그인 후 평가할 수 있습니다

    답변에 대한 댓글 1개

    m
    morrie
    5년 전
    답변감사합니다~

    댓글을 작성하려면 로그인이 필요합니다.

    샤브스타

    login 클래스가 아니고 li 태그 하단에 

    이부분을 추가해야 해요~

    로그인 후 평가할 수 있습니다

    댓글을 작성하려면 로그인이 필요합니다.

    innofact
    5년 전

    좋은 정보 얻고 갑니다

    로그인 후 평가할 수 있습니다

    댓글을 작성하려면 로그인이 필요합니다.

    답변을 작성하려면 로그인이 필요합니다.

    로그인