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

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

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

解决方案很简单：

在span标记中包含每个“heading / paragraph”块。
在CSS中，添加对span标记的引用，其中包含以下代码：

display：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中的“标题”之后没有列中断： enter image description here

根据this，this和this，分栏符不起作用。

Answer 4

以前版本的Safari从未支持过列中断 - 我的猜测仍然如此。苹果公司写道，自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大多数其他属性都是

CSS列中断？

7 个答案: