很好地安排内联块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以查看您需要的前缀。