确保列以 header 标记开头

Question

我有一长串看起来有点像这样的混合属性：

<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 生成的，所以我无法控制会有多少部分，或者每个部分将显示多少项目。我确实可以控制 CMS 使用的 html 输出和所有 front-end 技术等。

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

我们如何确保每个新列都以 header 开头？ 目前该列可能会在列表中间中断，这是不希望出现的行为。

Answer 1

一个可能的解决方案是将每个部分包装在一个容器中（我将使用 <div>，但您可能想要使用 <section>），然后为该容器指定样式所以它不会在列之间中断。

来自您原始代码的扩展（为了方便，我将所有内容都包装在 div 中，添加了样式以在 3 列中显示它，并添加了几个部分来显示效果）：

div#myDiv {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

<div id="myDiv">
    
    <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>
    
    <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>

    <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>

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

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

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

您可以通过两种不同的方式执行此操作：

选项 1：如果可以更改 HTML 结构

正如您提到的“我确实可以控制 html 输出”，将所有部分包装在 <div> 中并应用此样式来制作确保每个部分都被视为一个块，不会被分成不同的列：

div {
    display:inline-block;
    width:100%;
}

最终代码如下所示：

div#myDiv {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
#myDiv div {
    display:inline-block;
    width:100%;
}

<div id="myDiv">
    <div>
         <h3>Section Title</h3>

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

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

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

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

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

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

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

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

        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
</div>

你也可以在这个 JSFiddle 上看到它：http://jsfiddle.net/w4jLgfo1/

选项2：如果不能改HTML，但可以运行JS

正如您提到的，您可以运行所有前端技术，JavaScript（为了方便起见，jQuery 是一种 :)

与上面相同的 CSS 代码，但现在运行一个小的 JavaScript 片段，用于在生成并提供 HTML 后包装这些部分：

$("#myDiv h3").wrap("<div></div>");
$("#myDiv div").each(function() {
    $(this).append($(this).next());
});

div#myDiv {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}
#myDiv div {
    display:inline-block;
    width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myDiv">
    
    <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>
    
    <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>

    <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>

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

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

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

你也可以在这个 JSFiddle 上看到它：http://jsfiddle.net/w4jLgfo1/1/

确保列以 header 标记开头

Ensuring columns start with a header tag

html

css

multiple-columns