Html 纯栅格列表浮动动态高度不'；行不通

所以我想用动态高度来归档列表，这样它就会从页面左侧的第二行开始。像下面这样：

||  ||  ||   ||
    ||

||  ||  ||   ||

如果我使用

显示：内联块；垂直对齐：top

这是可行的，但如果我将每个块放在25%，它在一行上只显示3个块。 所以我使用了float:left，然后它在一行上显示了4个块。但后来一切都崩溃了

 ||  ||  ||   ||
     ||

         ||   ||
||   ||

我尝试了纯html/css，一切都正常，所以我想这是纯html的东西。有人能帮忙吗

代码：

---

您是在寻找一种可以使用动态列数的解决方案，还是一种固定在四列的解决方案可以？是的，它应该具有动态列数sis

display:flex

a选项？编辑：

<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>

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