将 li 移动到下一列答案

【问题标题】：Moving li to next column将 li 移动到下一列
【发布时间】：2018-09-05 17:34:14
【问题描述】：

我有一个简单的ul 像这样：

ul.target {
  font-family: calibri, verdana, arial;
  min-height: 500px;
  float: none;
  column-count: 4;
  column-width: 25%;
  column-gap: 1rem;
  column-rule: 1px solid gray;
  box-sizing: border-box;
}
ul {
  margin: auto;
  list-style: none;
}
ul > li > ul { 
  break-after: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul class="target">
  <li class="categ">category 1</li>
  <li class="item">test 1</li>
  <li class="item">test 2</li>
  <li class="categ">category 2</li>
  <li class="item">test 3</li>
  <li class="item">test 4</li>
  <li class="item">test 5</li>
  <li class="item">test 6</li>
  <li class="item">test 7</li>
  <li class="item">test 8</li>
  <li class="categ">category 3</li>
  <li class="item">test 9</li>
  <li class="item">test 10</li>
  <li class="item">test 11</li>
  <li class="item">test 12</li>
  <li class="item">test 13</li>
  <li class="item">test 14</li>
  <li class="item">test 15</li>
  <li class="item">test 16</li>
  <li class="item">test 17</li>
  <li class="item">test 18</li>
  <li class="categ">category 4</li>
  <li class="item">test 19</li>
  <li class="item">test 20</li>
  <li class="item">test 21</li>
  <li class="item">test 22</li>
  <li class="item">test 23</li>
  <li class="item">test 24</li>
  <li class="categ">category 5</li>
  <li class="item">test 25</li>
  <li class="item">test 26</li>
  <li class="item">test 27</li>
  <li class="item">test 28</li>
  <li class="item">test 29</li>
  <li class="item">test 30</li>
  <li class="item">test 31</li>
  <li class="item">test 32</li>
  <li class="item">test 33</li>
</ul>

您可以see here，类别 2 位于最底部，类别 3 位于中间。如果它们位于最底部，我希望能够将它们动态地移动到下一列。知道高度可能更大并且每列中可能有很多其他类别，我想将该列的 LAST 类别推送到下一列，从而相应地修改其余列。我不知道从哪里开始......

编辑，取自 cmets：

澄清一些事情：我的代码是一个包含更多内容的较大代码的一个小例子，所以问题仍然是关于如何将每个类别移动到下一列，试图找到另一种方法在我的情况下不起作用这只是一个预览。我正在使用 JQuery 来获取类别和项目列表，然后我不知道如何使用 JS 将类别推送到下一列。如果它是当前列的最后一个类别，它应该重新定位到下一列。

【问题讨论】：

你已经尝试了什么？
@BenM 感谢您的评论！正如我所说，我不知道从哪里开始或这里调整了什么逻辑。我不是在寻找一个纯粹的答案，只是想知道我从哪里开始自己解决问题。
你的问题在这里描述> stackoverflow.com/questions/23082368/… 基本上，如何定位列中的最后一个孩子，以及如何替换/移动它，如果它是.categ li。我宁愿一开始就改变html结构（动态创建，如我所见）......
您可以查看Insert column break in css3 column，因为它似乎是您正在寻找的；请务必阅读完整的答案，因为它有一个折叠的 sn-p 这可能是您想要的。
@HereticMonkey 很抱歉，您完全正确，我将您的答案标记为已回答，以感谢您的努力！

标签： javascript html css

【解决方案1】：

您可以将break-before 属性应用于.categ 类，但最终会得到三列：

var item = $(".item")
var categ = $(".categ")

ul {
  font-family: calibri, verdana, arial;
  min-height: 500px;
  float: none;
  margin: auto;
  list-style: none;
  column-count: 4;
  column-width: 25%;
  column-gap: 1rem;
  column-rule: 1px solid gray;
  box-sizing: border-box;
}
.categ {
  break-before: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul>
  <li class="categ">category 1</li>
  <li class="item">test 1</li>
  <li class="item">test 2</li>
  <li class="categ">category 2</li>
  <li class="item">test 3</li>
  <li class="item">test 4</li>
  <li class="item">test 5</li>
  <li class="item">test 6</li>
  <li class="item">test 7</li>
  <li class="item">test 8</li>
  <li class="categ">category 3</li>
  <li class="item">test 9</li>
  <li class="item">test 10</li>
  <li class="item">test 11</li>
  <li class="item">test 12</li>
</ul>

您必须更改 DOM 才能使其正常工作。在下面的 sn-p 中，我从 .categ 列表项及其所有后续 .item 兄弟姐妹中创建了“子列表”（使用 jQuery，因为您将其包含在您的 sn-p 中）。我还在最上面的ul 添加了一个类，以便区分它的样式。您也可以使用 uls 上的类作为“子列表”，而不是像我一样使用子选择器。

$(".categ").each((idx, cat) =&gt; $(cat).nextUntil(".categ", ".item").addBack().wrapAll("&lt;li&gt;&lt;ul&gt;"));

ul.target {
  font-family: calibri, verdana, arial;
  min-height: 500px;
  float: none;
  column-count: 4;
  column-width: 25%;
  column-gap: 1rem;
  column-rule: 1px solid gray;
  box-sizing: border-box;
}
ul {
  margin: auto;
  list-style: none;
}
ul > li > ul { 
  break-after: column;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<ul class="target">
  <li class="categ">category 1</li>
  <li class="item">test 1</li>
  <li class="item">test 2</li>
  <li class="categ">category 2</li>
  <li class="item">test 3</li>
  <li class="item">test 4</li>
  <li class="item">test 5</li>
  <li class="item">test 6</li>
  <li class="item">test 7</li>
  <li class="item">test 8</li>
  <li class="categ">category 3</li>
  <li class="item">test 9</li>
  <li class="item">test 10</li>
  <li class="item">test 11</li>
  <li class="item">test 12</li>
</ul>

【讨论】：

您能解释一下您的代码吗？由于它最终成为5 columns，我觉得它是为每个类别制作一个列，而不是列的最后一个类别。
你的第一个代码做同样的事情，categ 上的break-columns 将每个categ 放入一个新列而不是最后一个类别。
是的，就像我说的那样，第一个只是证明break-before 不能像您想要的那样工作。您的小提琴与您提供的示例不同的 HTML。使用您在原始问题中提供的代码，它可以工作。移动球门柱不公平......

【解决方案2】：

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

我认为问题不在于您应用于数据 (HTML) 的表示规则 (CSS)。我认为问题在于您的数据没有为您的演示规则提供足够的上下文来采取行动。

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

尝试使您的 HTML 更加明确。为什么将所有内容都放在一个列表中，而不是每个类别一个列表？然后，您可以通过浮动或弹性甚至网格布局以您想要的方式证明类别的合理性。我不明白为什么你应该为此需要 jQuery？

还是我误解了你的问题？

【讨论】：

我的代码是一个大代码的小例子，其中包含的内容远不止这些，所以问题仍然在于如何将每个类别移到下一列，试图找到另一种方法在我的情况下不起作用，因为这只是一个预览。我正在使用 JQuery 来获取类别和项目列表，然后我不知道如何使用 JS 将类别推送到下一列。你不确定什么？
我不确定您所说的“移动”是什么意思。您是否希望能够将项目从一列拖放到另一列。还是您期望某个内容“流动”。
不，不是拖放，如果它是当前列的最后一个类别，它应该只是重新定位到下一列。如果我的条件不正确，我很抱歉！所以是的，一定的内容流。
我已经举例说明了我的例子：codepen.io/svenvandescheur/pen/xarqxv。此示例依赖于：A：HTML 中的分组类别，B：容器的已知最大高度。 C：弹性布局。
这似乎不是一个答案，而是一系列试图澄清问题的问题。这个目的是由 Stack Overflow 上的 cmets 实现的。如果您有答案，请将代码包含在答案本身中，而不是仅在外部网站上。