我如何获得CSS列中的标题以保持其段落

时间:2014-10-17 21:52:17

标签: html css multiple-columns typography

我有一些带有标题的段落,分为四列。我需要标题永远不要在他们的下一段之前打破,同时仍然很好地流过列。

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

2 个答案:

答案 0 :(得分:3)

如果将标题和段落包装在单个元素(如div)中,并将父显示内联块和宽度100%包含在内,则会阻止标题段对突破到下一列。

&#13;
&#13;
body {
  font-family:arial;
  columns: 40px 3;
}
h3,p {
  margin:0;
}
div.item {
  width:100%;
  display:inline-block;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我所知道的唯一解决方案是“列中断”规则,也许你应该对此进行测试,但我之前从未使用过它。

你可以尝试这一点:

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