CSS列中断？

Question

我一直在尝试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: always我仍然得到同样的结果.没有什么变化.有人可以帮帮我吗？我在Firefox 4.6和Safari 5.0.5中测试过它.

谢谢

Answer 1

CSS列中断规则支持不足,但我找到了一个足够接近的解决方法.而不是写这个:

 <div class="columns">
    <h1>Heading</h1>
    <p>Paragraph</p>
 </div>

我写的是这样的:

 <div class="columns">
    <div class="keeptogether">
       <h1>Heading</h1>
       <p>Paragraph</p>
    </div>
 </div>

然后CSS看起来像这样:

 div.columns {
    column-width: 300px;
    -moz-column-width: 300px;
    -webkit-column-width: 300px;
 }
 div.keeptogether {
    display: inline-block;
    width: 100%;
 }

例如,您可以在此处查看结果.

Answer 2

我遇到了同样的问题，并按以下方法解决。

我的主要问题不是在每个“标题/段落”块之后插入换行符，而是避免在“标题/段落”块内插入换行符。

解决方案很简单：

1. 将每个“标题/段落”块括在span标签中。

2. 在CSS中，添加对span标签的引用，其中包含以下代码：

   显示：inline-block; 宽度：100％;

小缺点是，这可能会在某些列的底部留下空白区域。

在我的情况下，整个CSS如下（div定义了数据流的全局格式）：

div {
    -webkit-column-width: 20em; /* 20em wide */
    -webkit-column-gap: 2em;  /* 2em gap */
    -webkit-column-rule: 1px solid #eee;   /* 1px border between columns */
    -webkit-column-count: 3; /* 3 columns max! */

    -moz-column-width: 20em;
    -moz-column-gap: 2em;
    -moz-column-rule: 1px solid #eee; 
    -moz-column-count: 4;

    -ms-column-width: 20em;
    -ms-column-gap: 2em;
    -ms-column-rule: 1px solid #eee; 
    -ms-column-count: 3;

    column-width: 20em;
    column-gap: 2em;
    column-rule: 1px solid #eee; 
    column-count: 3;

    padding: 5px;
}

.tokeeptogether {
    display: inline-block;
    width: 100%;
}

Answer 3

这就是问题所在 - 在 Safari 和 Firefox 中的“标题”之后没有分栏：

根据this，this和this列中断尚未起作用。