css 멀티 컬럼 문제

Question

몇 가지 CSS 마법을 도와주세요.

나는 flixable 다중 열 레이아웃을 달성하려고합니다. 이 같은 http://masonry.desandro.com/demos/basic-multi-column.html 나는 청사진과 자바 스크립트와 함께 이것을 얻을 수 있습니까?

청사진 것은 지금 그

Answer 1

(첨부 파일 참조) 공백을 많이 추가된다 다음은 당신이 당신의 요구에 따라 너비/높이를 변경 .. 하나의 샘플입니다. 희망이 도움이됩니다.

CSS 
---- 
.content { 
    float: left; 
    display: block; 
    width: 1000px; 
    background: red; 
} 

.sub-content { 
    float:left; 
    width: 200px; 
    background: blue; 
    margin: 10px; 
} 

Sample HTML 
----------- 
<div class="content"> 
<div class="sub-content" style="width: 500px; height: 300px;"> 
    DIV 1 
</div> 

<div class="sub-content" style="width: 200px; height: 100px;"> 
    DIV 2 
</div> 

<div class="sub-content" style="width: 500px; height: 300px;"> 
    DIV 3 
</div> 

<div class="sub-content" style="width: 250px; height: 300px;"> 
    DIV 4 
</div> 
</div>