css - css多列问题

Question

你能帮我一些css魔法吗？

我正在尝试实现一个灵活的多列布局。像这样的东西http://masonry.desandro.com/demos/basic-multi-column.html我可以用蓝图而不是 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>