Html 如何使CSS列中的标题与其段落保持一致

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

HTML

---

如果将标题和段落包装在单个元素（如div）中，并将父显示内联块和宽度设置为100%，则将防止标题-段落对断开到下一列

正文{
字体系列：arial；
色谱柱：40px3；
}
h3，p{
保证金：0；
}
分部项目{
宽度：100%；
显示：内联块；
}

标题1这里有一些文本

标题2这里有一些文字

标题3这里有一些文本。

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

你可以试试这个：

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列的全面指南：

谢谢您的尝试。这种解决方案的问题在于，它将整个部分保持在一起，而您通常希望这些类型的列在段落之间、段落文本的前两行之后以及标题之后断开。我想HTML和CSS还不能单独用于这些类型的文本列。请参阅我对retober的回复。

。列h2{-webkit列在：避免之后中断；在：避免列之后中断；}

是为了满足您的需要，但它在webkit中还不起作用。

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

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