Html CSS浮动LI具有不同的高度，没有间隙

我试图将一个列表浮动成两列。每个

li

都有不同的高度，我正试图在没有巨大间距的情况下实现这一点

这是我得到的最接近的结果：

HTML

注意：我没有像这样的

br

标签，只是为了使每个高度不同。它代表内容

<ul>
    <li><br /><br /><br /></li>
    <li><br /><br /></li>
    <li><br /><br /><br /><br /></li>
    <li><br /></li>
    <li><br /><br /><br /></li>
    <li><br /><br /></li>
</ul>

---

除了使用两个

元素（我认为您受到当前呈现html的方式的限制），您还可以尝试使用

列计数属性（css3）进行快速修复

ul { 
    /* your existing css */
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
}

另外，我删除了float属性
：nth child（2n+1）
属性，以便在以这种方式接近它时保持列对齐

在这里分岔：
除了使用两个
元素（我想您受到html当前呈现方式的限制），您还可以尝试
列计数属性（css3）来快速修复

ul { 
    /* your existing css */
    -moz-column-count:2;
    -webkit-column-count:2;
    column-count:2;
}

另外，我删除了float属性
：nth child（2n+1）
属性，以便在以这种方式接近它时保持列对齐

把小提琴叉在这里：可能正在使用flex display

ul { width: 300px; 
    height: 250px;
    margin: 0 auto; border: 1px solid black; list-style: none; padding: 0; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

可能正在使用flex显示

ul { width: 300px; 
    height: 250px;
    margin: 0 auto; border: 1px solid black; list-style: none; padding: 0; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

@Cameron Hurd您的小提琴还有一些问题。使用
列
并浮动子元素没有意义。我做了一把最新的小提琴：。@Cameron Hurd你的小提琴还有一些问题。使用
列
并浮动子元素没有意义。我做了一个更新的提琴：。在这种情况下，Flexbox似乎不是正确的选择。主要有两个原因。首先，它将拉伸一个较低的框或填充空间（如下）。其次，Firefox仍然不支持flex-wrap。在这种情况下，Flexbox似乎不是正确的选择。主要有两个原因。首先，它将拉伸一个较低的框或填充空间（如下）。第二，Firefox仍然不支持flex wrap。