Html 确保列以标题标记开头

我有一个很长的混合属性列表，看起来不太像这样：

<h3>Section Title</h3>
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
<h3>Section Title</h3>
<ul>
    <li>Item</li>
    <li>Item</li>
</ul>

章节标题

项目
项目
项目
项目

章节标题

项目
项目

因为html是由使用CMS的客户机生成的，所以我无法控制将有多少部分，或者每个部分将显示多少项。我可以控制html输出和CMS使用的所有前端技术等

我们想把这个列表分成3列（大约）相等的高度，最有效的方法似乎是CC3列

如何确保每个新列都以标题开头？

---

目前，列可以在列表中间中断，这不是期望的行为。 一种可能的解决方案是将每个部分包装在一个容器中（我将使用

，但您可能希望使用

），然后指定该容器的样式，使其不会在列之间中断

从原始代码的扩展（为了方便起见，我将所有内容包装在一个

div

中，添加了样式以在3列中显示，并添加了几个部分以显示效果）：

div#myDiv{
-webkit列数：3；
-moz列数：3；
列数：3；
}

章节标题

项目
项目
项目
项目

章节标题

项目
项目

章节标题

项目
项目
项目
项目

章节标题

项目
项目

章节标题

项目
项目
项目
项目

章节标题

项目
项目

章节标题

项目
项目

章节标题

项目
项目

章节标题

项目
项目

如果您可以控制输出，是否可以将h3作为第一个元素添加到列表中？像这样的？“我确实可以控制html输出”是什么意思？（你能改变上面的HTML结构吗？）你是在寻找纯CSS解决方案还是JavaScript（作为前端技术）是一种选择？我的意思是，在项目移交之前，我可以控制任何东西。此时，最终用户可能有10个类别，每个类别有100个项目；或者100件。因此，我们需要一个随时间变化而自适应的解决方案。（很明显，如果它变得巨大，它需要重新思考信息体系结构，但是这个一页/3栏的解决方案应该在我们想象的范围内适用。）太棒了。通过为每个孩子使用内联块来阻止他们被破坏，我们可以在不添加额外js的情况下做我们需要的事情。然而，我也测试了这个选项，它也将实现我们所需要的。