CSS列中断？

我一直在尝试CSS列，但我不能rest工作。 到目前为止，这里是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中testing过了。

谢谢

Answer 1

以下是问题所在 – Safari和Firefox中的“标题”后没有列中断：

据此， 这个和这个列的rest时间还没有工作。

Answer 2

CSS列中断规则得不到很好的支持，但是我find了一个解决方法，做了足够接近的事情。 而不是写这个：

  <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 3

我遇到了同样的问题，解决它如下。

我的主要问题是没有在每个“标题/段落”块之后插入一个中断，而是避免在“标题/段落”块内的列中断。

解决scheme很简单：

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

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

   显示：内联块; 宽度：100％;

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

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

 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 4

以前的Safari版本从来都不支持列断行 – 我猜这仍然是这种情况。 苹果自从3.0以来就已经写了支持它（ Safari关于列间隔的文档 ），这是相当奇怪的…

与Firefox一样。 Chrome是唯一支持几乎所有（如果不是全部）列控制的浏览器。

Answer 5

 break-after: 

是不正确的，应该是：

 column-break-after 

也没有人提到这些属性：

 -webkit-column-span: all; -moz-column-span: all; column-span: all; 

这听起来像他们可能在这里有用

编辑：另外，应该提到的是，对列的支持现在实际上相当不错，尽pipe使用了供应商前缀。

 column-fill 

仍然不被大多数浏览器支持，但AFAIK大多数其他属性是

Answer 6

看起来样本中的h1足够大，总是会造成一个突破，如果缩短到只是“头”，那么破坏后会起作用。

Answer 7

如果我没有弄错的话，你希望标题遍历所有的列，只让以下的兄弟姐妹分裂，对不对？
恐怕列间歇仍然不能按预期工作，所以 – 它可能不是最“正统”的解决scheme，但救了我 – 我用一些时髦的样式来解决这个问题：

基本的HTML：

 <div class="container"> <h1>Header</h1> <p>First paragraph</p> <p>Second paragraph</p> <p>Third paragraph</p> </div> 

基本的CSS：

 .container{ column-count:3; /* Add necessary prefixes */ padding-top:2em; position:relative; } .h1{ position:absolute; top:0; } 

绝对定位免除列stream中的元素，似乎工作得很好。

PS：刚才注意到这个post挺老的…嗯，我希望这可以帮助别人，对这些CSS属性的支持还没有太大的提高