css - 很好地排列内联 block 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查看您需要哪些前缀。