css - インライン ブロックの div をうまく配置する

Question

このレイアウトの div のセットがあります。

div.post_summary {
    clear: none;
    width: 170px;
    display: inline-block;
    float: left;
    margin: 5px;
    background-color: #FF5900;
}

次のようになります。

しかし、私はそれを次のようにしたい:

div の順序は重要ではありません。これどうやってするの？

Answer 1

順序は重要ではないため、CSS 列を使用してこれを行うことができます。

http://codepen.io/cimmanon/pen/CcGlE

div.container { /* container holding all of your `div.post_summary` elements */
  columns: 20em; /* desired width of the columns */
}

div.post_summary {
    margin: .5em;
    background-color: #CCC;
}

div.post_summary:first-child {
  margin-top: 0;
}

http://caniuse.com/#feat=multicolumnをチェックして、必要なプレフィックスを確認してください。