CSS/JS/jQuery를 - 내가 떠있는 방식으로 이미지를 표시 할 필요가

Question

다른 크기의 부동 이미지 - 그러나 그들은 4 작은 것들의 크기를 갖는 더 큰 하나가, 여기에 시각적 인 예입니다, 2 개 크기에 와서 :

http://minus.com/lbfCTUyQj0BHcf

내가 나서서 Masonry, 다른 SO 질문에 제안 멋진 플러그인, 을 사용하지만, 그것은 단지 지금까지 나를 데려 :

http://minus.com/mkF3uSMeo/

으로 할 수 있습니다들 아직 빈 공간이 있습니다.

아이디어가 있습니까? css, js, jquery 또는 심지어 다른 라이브러리 (jquery에 솔루션을 적용 할 수 있음을 나타냄)와 같은 모든 솔루션이 도움이됩니다.

목표는 빈 공간이 없지만 모든 것이 채워지고 레이아웃이 유동적이거나 액체 여야합니다.

감사합니다.

Answer 1

주어진 다음의 HTML 구조 (당신은 가능성이 JQuery와 통해 클래스를 추가 할), 다음 CSS를 당신이 원하는 것을 달성하기 위해 잘 작동하는 것 같다 (see fiddle에만 현재 IE7-9 테스트는) :

HTML

<img class="half top" /> 
<img class="half" /> 
<img class="full" /> 

CSS

.half, 
.full { 
    float: left;  
    margin: 0 10px 10px 0; 
} 

.half { 
    width: 40px; 
    height: 60px; 
} 

.full { 
    width: 90px; 
    height: 130px; 
} 

.half.top + .half { 
    margin-left: -50px; 
    margin-top: 70px; 
}