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

你可以看到结果here, for example。

Answer 2

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

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

解决方法很简单：

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

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

   显示：内联块； 宽度：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 的说法，分栏符目前还不起作用。

Answer 4

以前版本的 Safari 从未支持分栏符 - 我猜这仍然是这种情况。很奇怪，Apple 已经写到它从 3.0 开始就受支持了（Safari documentation about column breaks）...

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

Answer 5

样本中的 h1 似乎恰好足够大，以至于总是在它之后引起中断，如果将其缩短为“头部”，则后中断会产生影响。

Answer 6

如果我没记错的话，您希望标题跨越所有列并只拆分以下同级，对吗？
恐怕分栏符仍然无法按预期工作，所以 - 它可能不是最“正统”的解决方案，但救了我 - 我用一些时髦的样式解决了这个问题：

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

绝对定位使该元素从列流中排除，似乎工作得很好。

P.S.：刚刚注意到这篇文章相当老了......好吧，我希望这对其他人有帮助，对这些 CSS 属性的支持并没有改善那很多

Answer 7

break-after: 

不正确，应该是：

column-break-after

另外，没有人提到这些属性：

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

听起来它们在这里很有用

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

column-fill

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