Html 父项高度超过后如何进入新列

我正在处理列和行，无法使其正常工作，下面是我需要的示例：

以下是我的css：

ul.people {
 position: absolute;
 width: 900px;
 height: 640px;
 top: 450px;
 right: 318px;
 list-style: none;
 overflow: hidden;
}

li.man-red {
 width: 45px;
 height: 132px;
 background: url(../img/man_red.png) no-repeat;
 background-position: 3px 5px;
}

---

所以，我需要每五个li元素进入一个新的列

我用以下方法想出了一些聪明的点子：

浮动：左； 使用顶部和左侧坐标进行相对定位 左边距为负数 例如：

李文红{ 位置：相对位置； 浮动：左； 宽度：45px； 高度：132px； 保证金：1px； 颜色：fff； 字体大小：粗体； 背景：url../img/man_red.png不重复f00； 背景位置：3px 5px； 列表样式类型：无； } 李文红：第n种类型4n+1{ 排名：0； 左：0； } 李文红：第n种类型4n+2{ 顶部：134px； 左：-47px； } 李文红：第n种类型4n+3{ 顶部：268px； 左：-94px； } 李文红：第n种类型4n+4{ 顶部：402px； 左：-141px； } 李文红：第n种类型4n+5{ 左边距：-140px； } 李文红：第n种类型4n+6{ 左边距：-93px； } 李文红：第n种类型4n+7{ 左边距：-46px； } 李文红：第n种类型4n+8{ 左边距：1px； } 1. 2. 3. 4. 5. 6. 7. 8. 9 10 11 12 13 14 15 16 17 18 19 20

---

你想达到这样的目的？在每个ul中添加5 li的组

一小条 保险商实验室{ 显示：内联块； 背景：浅蓝色； 保证金：0； 填充：0； } .图{ 宽度：45px； 高度：132px； 保证金：1px； 背景：url//lorempixel.com/45/132无重复红色； 背景位置：3px 5px； 列表样式类型：无； }

---

为了回答我自己的问题，我设置了这个样式，它实际上是有效的：

ul.people {
  position: absolute;
  width: 900px;
  height: 640px;
  top: 450px;
  right: 318px;
  list-style: none;
  overflow: hidden;
  -webkit-columns: 20;
  -moz-columns: 20;
  columns: 20;
  -webkit-column-gap: 0; 
  -moz-column-gap: 0; 
  column-gap: 0;
  -webkit-column-rule: 0; 
  -moz-column-rule: 0; 
  column-rule: 0;
}

li.man-red {
  width: 45px;
  height: 132px;
  background: url(../img/man_red.png) no-repeat;
  background-position: 3px 5px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

---

我不清楚你在问什么我有javascript，你可以添加/删除这些人。。。如果我将float:left设置为li元素，它会非常有效，但我希望人们从上到下排序，并且当超过高度时，可以进入新行。如果使用float:left，则显示：inline块不起任何作用感谢快速响应，但我需要从上到下订购，然后在超过高度时再订购新的一行。@dippas-wow。你说得太对了。多年来，我一直本能地这么做——这可能要追溯到IE6兼容性黑客之类的东西——但我从未真正想过这一点。谢谢你的提醒。@Rounin没问题，我记得IE6和IE7@Rounin例如：当我添加5个li元素5x 132px时，高度与父div相同。然后我需要第六个li元素放在新行中。这没关系，但我不想修改javascript，为每五个项目添加新的ul。纯CSS有可能做到这一点吗？让我来测试一下，看看我能用纯CSS做些什么。除了我在回答中给你的方法外，我现在还看不到其他方法。是的，这很棘手。那我就用js来做。如果你找到答案，也许请更新答案，我会接受它。@Rounin Ya喜欢精灵图像，这在我脑海中闪过，但我当时并不在意。只是忘记了图像的宽度和高度是固定的。向上投票。请小心分页符，因为尚未使用“避免”支持分页符-