float가 있는 자식 div의 height를 읽는법이요ㅠㅠ

float가 있는 자식 div의 height를 읽는법이요ㅠㅠ

QA

float가 있는 자식 div의 height를 읽는법이요ㅠㅠ

본문

내용이 긴데 더보기 눌러서 봐주시면 감사합니다..ㅠㅠ
며칠내내 혼자 끙끙 앓다가 글 올려봅니다..
인터넷에서 이미지 썸네일을 클릭하면 확대되는 소스를 받아서 붙였습니다.
이런 구성이고 li에 float:left; 속성이 있습니다.

<div id="stage">
      <ul id="pg">
       <li><img src="../images/gshot1.jpg" alt="Game Screenshot"></li>
       <li><img src="../images/gshot2.jpg" alt="Game Screenshot"></li>
       <li><img src="../images/gshot3.jpg" alt="Game Screenshot"></li>
       <li><img src="../images/gshot4.jpg" alt="Game Screenshot"></li>
       <li><img src="../images/gshot5.jpg" alt="Game Screenshot"></li>
      </ul>
      <div style="clear:both;"></div> 
     </div> 
 
부모div에다가 높이값을 넣어줬습니다. #stage{min-height:110px;} pc에서는 잘보이는데 문제는 모바일입니다. 모바일에서는 li에 float:left;한게 세로로 쭉 나오는데요, #stage가 height:110px;만큼만 있습니다!!! 그래서 푸터랑 겹치게 되더라구요.. 캡쳐입니다.
KakaoTalk_20140611_191545767.jpg
 
 
제가 바라는 모습▽
22.jpg
 
제가 원하는건 이런 모습입니다... 자식개체의 내용만큼 부모개체 높이가 늘어났으면 좋겟는데...
자식개체에 float가 사용되면 높이값을 부모가 인식 못한다고 해서 찾아보다가 clear:both나 overflow:auto나 overflow:hidden 이 3개중에 하나 써보라고 해서 해봤는데 잘 안됩니다.
 
혹시 다른 방법 있을까요?
 
 

이 질문에 댓글 쓰기 :

답변 2

아래두 군데에 width값이 고정으로 들어가 있어서
다른 div width 값을 100%로 잡아도 이미지가 가로로 나오는 듯 보입니다.

#movie{background-color:#000; width:970px; max-width:100%; height:auto; text-align:center; margin:0 auto;}

<iframe width="800" height="430" src="#" wmode="Opaque" frameborder="0" allowfullscreen></iframe>

그래서 모바일에서 볼 때 전체 가로는 970px 가 되는겁니다.

아,감사합니다ㅠㅠ 그럼 혹시 세로 높이는 자동으로 늘어나게 하려면 어떻게 해야할까요?ㅠㅠㅠ
이미지는 세로로 길게나오는데 이미지를 둘러싼 div가 이미지 높이보다 짧은데요ㅠㅠㅠㅠ

위에 적은 부분들 가로 넓이를 %로 변경해보세요.
아니면 미디어쿼리를 이용해도 됩니다. 아래 전진님 강좌 참고해보세요.
http://sir.co.kr/bbs/board.php?bo_table=pb_lecture&wr_id=167&sca=%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9#vc_mq_examples

float로 인한 높이만을 해결하려면 overflow: hidden;이면 족하겠지만...

위에 의도하시는 화면결과물을 위한 거라면

저라면 ul#pg에 text-align: center 을 주고

li에먹힌 float: left;​를 삭제하고 display: inline-block;​ 먹인다거나,

아니면 아에 li에 width고정값을 주고 margin으로 auto를 활용할것 같습니다..

답변을 작성하시기 전에 로그인 해주세요.
전체 1,124
QA 내용 검색
filter #html ×

회원로그인

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