CSS3：带标题的多列系统

Question

我正在尝试使用CSS3 column-count属性在网站中构建多列部分，所需的输出为：

我使用带有浮点数和边距的旧div方案制作了图像，但是我试图理解如何使用CSS3做同样的事情。

到目前为止，我设法制作了以下代码：

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

}

代码产生以下输出：

如何更换初始目标？并且在Title 3中内容要大得多，我如何告诉浏览器在它找到的每个<h1>元素上创建一个新列（或者可能是其他不可见标记）？

谢谢。

Answer 1

我设法解决了这个问题：

1. 在<p>之后立即删除<div>;
2. 将列内容包装成段落;
3. 添加以下CSS：

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