html - 确保列以标题标记开头

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 输出和所有前端技术等。

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

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

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> 中并应用此样式以确保每个部分都被视为一个 block 并且不会被分成不同的列:

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/

方案二:如果不能更改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/