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;만큼만 있습니다!!! 그래서 푸터랑 겹치게 되더라구요.. 캡쳐입니다.
제가 바라는 모습▽
자식개체에 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 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를 활용할것 같습니다..
답변을 작성하시기 전에 로그인 해주세요.
