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以查看您需要哪些前缀。