Html CSS3：带标题的多栏系统

我正在尝试使用CSS3

column count

属性在网站中构建多栏部分，所需的输出如下：

我使用带有浮点数和边距的旧

div

scheme制作了图像，但是我试图理解如何使用CSS3实现同样的效果

到目前为止，a已成功生成以下代码：

<div id="target">   
    <p>
        <h2>Title 1</h2>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        <h2>Title 2</h2>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        <h2>Title 3</h2>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

        <h2>Title 4</h2>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>

</div>



div#target p {
    column-count: 4;
    -webkit-column-count:4;
    -moz-column-count:4;
    column-gap:30px;
    -moz-column-gap:30px;
    -webkit-column-gap:30px;

}

标题1
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”。
标题2
“Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。
标题3
“知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德。”。
标题4
“Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut laboure and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。

分区#目标p{
列数：4；
-webkit列数：4；
-moz列数：4；
柱间距：30px；
-moz柱间距：30px；
-webkit柱间隙：30px；
}

该代码生成以下输出：

如何替换初始目标？如果

Title 3

中的内容要大得多，我如何告诉浏览器在找到的每个

元素（或者其他不可见的标记）上创建一个新列

---

谢谢。

我通过以下方式解决了此问题：

在

之后移除

将列内容包装成段落

添加以下CSS：

div#target p {
  column-break-after: always;
  -webkit-column-break-after: always;
}