纯网格列表浮动动态高度不起作用

Question

所以我想归档具有动态高度的列表，因此它会在页面左侧开始第二行。像吼叫：

||  ||  ||   ||
    ||

||  ||  ||   ||

如果我使用display: inline-block; vertical-align:top这可行，但如果我将每个块放25％，它只在一行显示3个块。 所以我使用float:left然后它在一行显示4个块，应该如此。但随后一切都破裂了。

 ||  ||  ||   ||
     ||

         ||   ||
||   ||

我试着用普通的html / css一切正常，所以我想它纯粹的东西。有人可以帮忙吗？

代码：

<ul>
<li class="pure-u-md-6-24">1Teskts<br/>Teksts</li>
<li class="pure-u-md-6-24">2Teskts<br/>TekstTeskts<br/>TekstsTeskts<br/>TekstsTeskts<br/>Tekstss</li>
<li class="pure-u-md-6-24">3Teskts<br/>Teksts</li>
<li class="pure-u-md-6-24">4Teskts<br/>Teksts</li>
<li class="pure-u-md-6-24">5Teskts<br/>Teksts</li>
<li class="pure-u-md-6-24">6Teskts<br/>TekstTeskts<br/>TekstsTeskts<br/>TekstsTeskts<br/>Tekstss</li>
<li class="pure-u-md-6-24">7Teskts<br/>Teksts</li>

CSS

    ul{
    padding:0;
}
    li {
        display: inline-block;
        vertical-align: top;
        background: #e5e5e5;
        float:left;
        margin-bottom: 20px;
    }