html – CSS列分隔符?

我一直在尝试CSS列,但我不能休息工作。这里是CSS迄今为止:

#container { 
    width: 500px;
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
} 
h1 {
    break-after: always;
    -moz-column-break-after: always;
    -webkit-column-break-after: always;
}

下面是相关的HTML:

<div id="container">
    <h1>The header of the first column</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Maecenas interdum mattis leo, id vehicula sapien ultricies et.</p>
    <p>Donec orci nunc, rhoncus ut convallis a, pretium quis elit.</p>
    <p>Aenean vulputate vulputate bibendum.</p>
    <p>Fusce imperdiet velit quis diam fermentum ut volutpat ipsum convallis.</p>
</div>

不管如果我做了break-after:avoid,break-after:always,break-before:avoid或break-before:总是我仍然得到相同的结果。没有什么变化。有人可以帮助我吗?我已经测试了它在Firefox 4.6和Safari 5.0.5。

谢谢

这里有什么问题是 – 在Safari和Firefox中的“标题”后没有栏中断:

根据thisthisthis,列中断不工作。

http://stackoverflow.com/questions/6424088/css-column-breaks

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – CSS列分隔符?