브라우저 넓이에 따라 밑으로 떨어진 배너가 옆에 배너 높이 맞춰 고정되네요

브라우저 넓이에 따라 밑으로 떨어진 배너가 옆에 배너 높이 맞춰 고정되네요

QA

브라우저 넓이에 따라 밑으로 떨어진 배너가 옆에 배너 높이 맞춰 고정되네요

본문


<!doctype html>
<html lang="ko">
<head>
<style>
html,body { height:100%; border:0px; padding:0px; }
* { padding:0px; margin:0px; }
.Wrap { width:100%; height:100%; background:#000; }
.Wrap>.Tlvkf { width:300px; margin:5px; display:inline-block; border:1px #f00 soldi; background:#fff; vertical-align:top; }
</style>
</head>
<body>
 
<div class="Wrap">
 
<div class="Tlvkf"><br /><br /><br /></div>
<div class="Tlvkf"><br /><br /></div>
<div class="Tlvkf"><br /></div>
<div class="Tlvkf"><br /><br /><br /><br /></div>
<div class="Tlvkf"><br /><br /><br /></div>
 
</div>
 
</body>
</html>

 

이렇게 했을 경우 브라우저의 넓이가 줄어 들면 div 가 하나씩 밑으로 떨어지는데요

여기서 떨어진 것들이 위로 붙어야 하는데 오른쪽 높이 마춰 고정이 됩니다.

붙어 나왔으면 좋겠는데.

부스트트랩으로 해 놓은것이 있는데 수정하다 암 걸릴것 같고..

 

위와 같은 문제 해결하신 분 있으시면 힌트좀 부탁 드리겠습니다.

이 질문에 댓글 쓰기 :

답변 2

html 기본속성때문에 줄바꿈된 다른 요소는 위에있는 요소중 가장 높이가 큰 요소의 아래에 붙게되어있습니다.

 

jquery 플러그인을 사용하여 해결할 수 있습니다.

아래 사이트에 가시면 무료로 받아보실 수 있습니다^^

 

http://masonry.desandro.com/

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

회원로그인

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