html - 如何堆叠 div 列表以便没有垂直间隙？

Question

如果我有一个 div 列表（ul/li）（高度可变），有没有办法将它们堆叠起来，以便 div 和它下面的 div 之间没有间隙？就像 pinterest 的用户界面...

    <ul>
         <li>
           <div>...</div>
         </li>
         <li>
           <div>...</div>
         </li>
         ...
    </ul>    

    ul
    {
       list-style-type:none; 
       vertical-align:top;
    }

    li
    {
       list-style:none;    
       vertical-align:top;  
       display:inline-block;   
    }

这类似于这里的问题How to make div stack first vertical then Horizo​​ntal? 除了我仍然想这样订购：

1 2 3
4 5

Answer 1

遵循 CSS 足以创建该效果

ul, li  { margin: 0; padding: 0 }
ul li { float: left; }
ul li div { background: #f00; color: #fff; }

演示