css - css の複数列の問題

Question

cssマジックについて教えてください。

柔軟な複数列のレイアウトを実現しようとしています。このhttp://masonry.desandro.com/demos/basic-multi-column.htmlのようなものは、ブループリントと JavaScript なしでこれを達成できますか。

現在の設計図では、多くの空白が追加されています (添付ファイルを参照)。

Answer 1

以下は単なるサンプル 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>