html - CSS3 : Multi Column System with Titles

Question

我正在尝试使用 CSS3 在网站中构建多栏部分 column-count属性，所需的输出是这样的:

我使用旧的 div 制作了图像带有 float 和边距的方案，但是我想了解如何使用 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;

}

代码产生了以下输出:

如何替换初始目标？并且在 Title 3内容要大得多，我怎样才能告诉浏览器在每个 <h1> 处创建一个新列？它找到的元素(或者其他不可见的标记)？

谢谢。

Answer 1

我设法通过以下方式解决了这个问题:

1. 删除 <p>在 <div> 之后;
2. 将栏目内容包装成段落；
3. 添加以下 CSS:

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