css多列問題

Question

你能幫我一些CSS魔術。

我正試圖實現一個易混合的多列布局。像這樣http://masonry.desandro.com/demos/basic-multi-column.html可以用Blueprint和JavaScript來實現這一點。

與藍圖的事情，現在是增加了很多的空白（見附件）

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>