我有一些带有标题的段落,分为四列。我需要标题永远不会在下一段之前中断,同时仍然在各列中流畅地流动。
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;
}
最佳答案
如果将标题和段落包装在单个元素(例如 div)中,并将父显示内联 block 和宽度设置为 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>
关于html - 如何让 CSS 列中的标题与其段落保持一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26433943/