Question

我有一个简单的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类别推到下一列，从而相应地修改其余列。我不知道从哪里开始...

编辑，摘自评论：

为澄清某些问题：我的代码只是一个包含更多内容的较大代码的小示例，因此，没有问题仍然是如何将每个类别移至下一列，试图找到另一种处理方式对我而言不起作用，因为这只是一个预览。我正在使用JQuery来获取类别和项目列表，然后我不知道该如何使用JS将类别推到下一列。如果它是当前列的最后一个类别，则应该重新定位到下一列。

Answer 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才能使其正常工作。在以下代码段中，我从.categ列表项及其后的所有.item兄弟姐妹中提取了“子列表”（使用jQuery，因为您将其包含在代码段中）。我还在最顶部的ul中添加了一个类，以区分样式。您也可以在ul上为“子列表”使用一个类，而不是像我一样使用子选择器。

$(".categ").each((idx, cat) => $(cat).nextUntil(".categ", ".item").addBack().wrapAll("<li><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>
</ul>

Answer 2

免责声明，我不确定您要执行的操作：

我认为问题不在于您应用于数据（HTML）的表示规则（CSS）。我认为问题在于数据不能为您的演示规则提供足够的背景信息。

我想您想做的是在看起来像页脚的内容上显示3个（或更多）单独的列表。但是，您的HTML结构似乎与该方案不正确。

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

还是我误解了你的问题？

将li移至下一列

2 个答案: