如何让 CSS 列中的标题与他们的段落保持一致答案

【问题标题】：How can I get the headings in CSS-columns to keep with their paragraphs如何让 CSS 列中的标题与他们的段落保持一致
【发布时间】：2014-10-17 21:52:17
【问题描述】：

我有一些带有标题的段落，分为四列。我需要标题永远不要在下一段之前中断，同时仍然很好地通过列。

JSFiddle

HTML

<div class="columns">    
    <h2>First heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, qui, cumque? Maxime ad harum earum tempore, mollitia autem fugiat exercitationem fuga porro, ipsum commodi iusto dolorum perspiciatis reiciendis dolore est.</p>
    <h2>Second heading</h2>
    <p>Lorem […]</p>
    [etc]
</div>

CSS

body {
    font-size: 14px;
}
.columns {
    -webkit-columns: 4 5em;
    -moz-columns: 4 5em;
}
.columns h2 {
    margin-bottom: 0;
}
.columns h2:first-child {
    margin-top: 0;
}
.columns p {
    margin-top: 0;
}

【问题讨论】：

标签： html css multiple-columns typography

【解决方案1】：

如果您将标题和段落包装在单个元素（例如 div）中，并为父显示行内块以及宽度 100%，它将防止标题段落对中断到下一列。

body {
  font-family:arial;
  columns: 40px 3;
}
h3,p {
  margin:0;
}
div.item {
  width:100%;
  display:inline-block;
}

<div class="item"><h3>Header 1</h3><p>Some text here.</p></div>
<div class="item"><h3>Header 2</h3><p>Some text here.</p></div>
<div class="item"><h3>Header 3</h3><p>Some text here.</p></div>

【讨论】：

查看我对 retober 的回复。
.columns h2 { -webkit-column-break-after: avoid; break-after: avoid-column; } 旨在满足您的需求，但在 webkit 中尚不可用。 bugs.webkit.org/show_bug.cgi?id=61775

【解决方案2】：

我知道的唯一解决方案是“分栏”规则，也许你应该测试一下，但我以前从未使用过。

你可以试试这个：

section {
    -webkit-column-break-inside:avoid;
    -moz-column-break-inside:avoid;
    -o-column-break-inside:avoid;
    -ms-column-break-inside:avoid;
    column-break-inside:avoid;
}

关于 css-columns 的综合指南：An (Almost) Complete Guide to CSS3 Multi-column Layouts

【讨论】：

感谢您的尝试。此解决方案的问题在于它将整个部分保持在一起，而您通常希望这些类型的列在段落之间以及在标题后的前两行段落文本之后断开。我猜 HTML 和 CSS 还没有为这些类型的文本列做好准备。