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>