Html 让孩子们裹在一个有一定高度的沙发里

如果父元素中有一组子元素，并且父元素设置为小于所有列表项总和的某个高度，则默认情况下，子元素似乎直接从父元素流出：

但是，有没有可能让孩子们包裹起来，然后都留在父母体内呢？以jsfiddle为例，我们能否创建两个列表项的“列”，第一个“列”中有7个

li

s，第二个“列”中有3个

3

更新

我希望div保持142px的高度，孩子们在里面形成两列，我只是觉得能够一下子从数据库中循环li's会很酷。

看看这个

我曾经

.unordered-list {
    -moz-columns: 2 142px;
    -webkit-columns: 2 142px;
    columns: 2 142px;
}

编辑：

看看这个 唯一的问题是，UL的CSS可能不适用于第2列中的li项目

---

如果这对您不起作用，请告诉我。

不确定仅使用CSS是否可行，您可以非常轻松地使用Javascript，但如果您只需要CSS，我建议将每个

li

50%的宽度设置为左浮动，以便它们始终显示在两列中。Starkers，这是一个使用Javascript的非常快速的原型（jQuery）我已经制作了两个无序列表（您可以使用CSS将它们并排排列），您可以看到，如果LIs的高度超过UL的高度，它将把LI放入下一个列表中。-我给列表指定类名的唯一原因是因为JSFIDLE不喜欢它。这似乎也不是他想要的——他希望列表项位于div的底部，如果有超出其处理能力的项，则转到新列。不要左右均匀地放置。

.unordered-list {
    -moz-columns: 2 142px;
    -webkit-columns: 2 142px;
    columns: 2 142px;
}