Javascript 将李移至下一列

我有一个简单的

ul

如下：

ul.target{
字体系列：calibri、verdana、arial；
最小高度：500px；
浮动：无；
列数：4；
列宽：25%；
柱间距：1rem；
列规则：1px实心灰色；
框大小：边框框；
}
保险商实验室{
保证金：自动；
列表样式：无；
}
ul>li>ul{
断开后：列；
}

第一类
试验1
试验2
第2类
试验3
试验4
试验5
试验6
试验7
试验8
第3类
试验9
试验10
试验11
试验12
试验13
试验14
试验15
试验16
试验17
试验18
第4类
试验19
试验20
试验21
试验22
试验23
试验24
第5类
试验25
试验26
试验27
试验28
试验29
试验30
试验31
试验32
试验33

免责声明，我有点不确定您想做什么：

我认为问题不在于应用于数据（HTML）的表示规则（CSS）。我认为问题在于，您的数据没有提供足够的上下文，您的演示规则无法根据这些上下文进行操作

我认为您正在尝试的是在看起来像页脚的东西上显示3个（或更多）单独的列表。但是，您的HTML结构似乎与此方案不匹配

尽量使你的HTML更明确。为什么把所有东西都放在一个列表中，而不是每个类别都放在一个列表中？然后，您可以通过浮动、flex甚至网格布局，以您想要的方式证明类别的合理性。我不明白你为什么需要jQuery来完成这个任务

---

或者我误解了您的问题了吗？

您可以将

break-before

属性应用于

.categ

类，但最后会有三列：

var item=$（“.item”）
变量类别=$（“.categ”）

ul{
字体系列：calibri、verdana、arial；
最小高度：500px；
浮动：无；
保证金：自动；
列表样式：无；
列数：4；
列宽：25%；
柱间距：1rem；
列规则：1px实心灰色；
框大小：边框框；
}
凯特格先生{
前断：列；
}

第一类
试验1
试验2
第2类
试验3
试验4
试验5
试验6
试验7
试验8
第3类
试验9
试验10
试验11
试验12

您已经尝试了什么？@BenM感谢您的评论！正如我所说，我不知道从哪里开始，也不知道这里采用了什么逻辑。我不是在寻找一个纯粹的答案，只是想知道我应该从哪里开始自己解决这个问题。这里描述了您的问题>基本上，如何针对专栏中的最后一个孩子，以及如何替换/移动它（如果是）。categ li。我宁愿在一开始就改变html结构（如我所见，是动态创建的）……你可以看一看，因为它似乎就是你想要的；请务必阅读整个答案，因为它有一个折叠的片段，这可能是您想要的。@HereticMonkey对不起，您完全正确，我将您的答案标记为已回答，以感谢您的努力！我的代码是一个包含更多内容的大型代码的小示例，因此问题仍然是如何将每个类别移动到下一列，试图找到另一种方法在我的情况下不起作用，因为这只是一个预览。我使用JQuery获取类别和项目列表，然后我不知道如何使用JS将类别推送到下一列。你不确定什么？我不确定你说的“移动”是什么意思。是否希望能够将项目从一列拖放到另一列。或者你希望某个内容“流动”。不，不是拖放，如果它是当前列的最后一个类别，它应该重新定位到下一列。如果我的条件不对，我很抱歉！是的，一个特定的内容流。我已经举例说明了我的示例：。此示例依赖于：A:HTML中的分组类别，B:容器的已知最大高度。灵活布局。这似乎不是一个答案，而是一系列试图澄清问题的问题。这里关于堆栈溢出的注释就是为了达到这个目的。如果您有答案，请在答案中包含代码，而不是仅在外部网站上。您能解释一下您的代码吗？当它结束制作时，我觉得它在为每个类别制作一个列，而不是该列的最后一个类别。你的第一个代码做了同样的事情，

categ

上的

break columns

将每个

categ

放在一个新列中，而不是最后一个类别。是的，就像我说的，第一个例子只是演示了这样一个事实，

break-before

不能像您希望的那样工作。你的提琴与你提供的样品有不同的HTML。使用您在原始问题中提供的代码，它可以正常工作。移动门柱是不公平的。。。