安排inline-block的div的很好

Question

我有這個佈局一組的div：

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

現在的樣子：

但我希望它看起來像：

divs的順序決不重要。我怎樣才能做到這一點？

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，看看哪些前綴需要。