Question

我正在尝试将列表浮动到2列中。每个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>

CSS

ul { width: 300px; margin: 0 auto; border: 1px solid black; list-style: none; padding: 0; }
ul li { width: 138px; margin: 1px 5px; border: 1px solid #d8d8d8; background-color: blue; float: left;}
ul li:nth-child(2n+1) { float: right; }

Answer 1

没有使用两个<ul>元素（我想你受到了当前正在渲染的html的约束），你可以尝试使用column-count属性（css3）来快速修复！

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

此外，我删除了浮动属性:nth-child(2n+1)属性，以保持列排列，同时以这种方式接近它。

在这里分享你的小提琴： Fiddle

Answer 2

可能正在使用弹性显示器吗？

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

fiddle

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

2 个答案: